/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 웹폰트 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('/css/charm/font/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Thin.woff') format('woff'); font-weight: 100; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-ExtraLight.woff') format('woff'); font-weight: 200; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Light.woff') format('woff'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Black.woff') format('woff'); font-weight: 900; font-display: swap; } /* SBAggro */ @font-face { font-family: 'SBAggro'; src: url('/css/charm/font/SB/SBAggroL.woff2') format('woff2'), url('/css/charm/font/SB/SBAggroL.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'SBAggro'; src: url('/css/charm/font/SB/SBAggroM.woff2') format('woff2'), url('/css/charm/font/SB/SBAggroM.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'SBAggro'; src: url('/css/charm/font/SB/SBAggroB.woff2') format('woff2'), url('/css/charm/font/SB/SBAggroB.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// reset css ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ * { box-sizing:border-box; } html, body { height:100%; } html { font-size:10px; font-family:'SBAggro', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif; color:#333; font-weight:300; line-height: 1.2; } body{min-width:320px; word-break: keep-all; overflow-x:hidden; letter-spacing:-0.01rem; margin:0 auto; font-size:1.6rem; line-height:1.6; } body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,a,button,select {margin:0;padding:0;box-sizing:border-box; word-break:keep-all;} body,input,textarea,select,button,table,label {-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none; text-size-adjust:none; font-weight:300; font-family:'SBAggro', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif; color:var(--text-dkgrey); } a {text-decoration:none;} a:link {text-decoration:none; color:#575757;} a:visited {text-decoration:none; color:#575757; } a:active {text-decoration:none; color:#575757;} a:hover {text-decoration:none;} ul, li{list-style:none;} caption,legend,.blind{overflow:hidden;position:absolute;top:0;left:-9999px;width:0;height:0;font-size:0;line-height:0;text-align:left;} input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button], select {width:100%; height:4.0rem;padding:0 15px;border:1px solid #ccc; color:#333;vertical-align:middle; font-size:1.6rem; background:#fff; } input[type=password],input[type=email]{ime-mode:disabled;} input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, select:focus, textarea:focus{border:1px solid #999;} input[type=file]{width:100%;height:4.0rem;border:1px solid #ccc;background:#fff;} textarea{width:100%;padding:10px;border:1px solid #ccc;resize:none; font-size:1.6rem; color:#333;} table{width:100%;border-collapse:collapse;border-spacing:0;} button[type='button'], input[type='button'] {cursor:pointer;} select option { font-weight:300;} input::placeholder, textarea::placeholder { color:#999; } img { max-width:100%;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { } @media all and (max-width: 768px) { input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button] { padding:0 10px; font-size:1.5rem;} textarea{font-size:1.5rem;} select {padding-left:10px; font-size:1.5rem; } } @media all and (max-width: 480px) { input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button], select {font-size:1.4rem; } textarea{font-size:1.4rem;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ /* 색상 */ :root { --gra-main-90deg: linear-gradient(0deg, rgb(199,123,163) 0%, rgb(170,144,188) 100%); --gra-main--90deg: linear-gradient(180deg, rgb(199,123,163) 0%, rgb(170,144,188) 100%); --gra-main: linear-gradient( 90deg, rgb(199,123,163) 0%, rgb(170,144,188) 100%); --gra-pink: linear-gradient(90deg, rgb(199,121,139) 0%, rgb(218,172,163) 100%); --gra-yellow: linear-gradient( 90deg, rgb(245,177,70) 0%, rgb(244,215,165) 100%); --gra-blue: linear-gradient( 90deg, rgb(121,170,198) 0%, rgb(151,193,184) 100%); --gra-green: linear-gradient( 90deg, rgb(144,185,98) 0%, rgb(184,212,116) 100%); --gra-bp: linear-gradient( -90deg, rgb(154,95,152) 0%, rgb(127,102,155) 28%, rgb(82,152,169) 100%); --main : #c77ba3; --pink:#c7798b; --purple: #aa90bc; --blue:#75a5bf; --green:#8eb179; --yellow:#f0a93b; --orange: #f26822; --border-ltgrey: #efefef; --text-main:#ab5683; --text-pink:#bd687b; --text-purple:#8d69a5; --text-blue:#619cbc; --text-green:#7da962; --text-yellow:#f0a93b; --text-black:#101010; --text-dkgrey:#333; --text-grey:#575757; --text-ltgrey:#777; --text-ltgrey01:#999; --text-white:#fff; } /* 배경 그라디언트 */ .bg-gra-main { background:var(--gra-main) !important; } .bg-gra-main-90deg { background:var(--gra-main-90deg) !important; } .bg-gra-main--90deg { background:var(--gra-main--90deg) !important; } .bg-gra-pink { background:var(--gra-pink) !important; } .bg-gra-yellow { background:var(--gra-yellow) !important; } .bg-gra-blue { background: var(--gra-blue) !important; } .bg-gra-green { background:var(--gra-green) !important; } .bg-white { background:#fff !important; } /* 폰트 색상*/ .text-main { color:var(--text-main) !important; } .text-pink { color:var(--text-pink) !important; } .text-blue { color:var(--text-blue) !important; } .text-green { color:var(--text-green) !important; } .text-black { color:var(--text-black) !important; } .text-dkgrey { color:var(--text-dkgrey) !important; } .text-grey { color:var(--text-grey) !important; } .text-white { color:#fff !important; } .hidden { position:absolute; font-size:0; line-height:0; left:-10000px; padding:0 !important; margin:0; height:0;} .f-left {float:left !important;} .f-right {float:right !important;} .dis-block {display:block !important;} .dis-none {display:none !important;} .text-c {text-align:center !important;} .text-l {text-align:left !important;} .text-r {text-align:right !important;} .vt-t {vertical-align:top !important;} .vt-m {vertical-align:middle !important;} .vt-b {vertical-align:bottom !important;} .bg-none {background:none !important;} .border-none {border:none !important;} .clearfix:after {content:"";display:block;clear:both;} .text-vc { margin-bottom:-3px; } /* 텍스트 디자인상 세로방향 가운데 정렬 문제*/ .flex-c { display:flex; justify-content:center;} .w100p { width:100% !important;} /* ios */ a[x-apple-data-detectors] { color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; white-space:nowrap; } .mt0 { margin-top:0rem !important; } .mt5 { margin-top:0.5rem !important; } .mt10 { margin-top:1rem !important; } .mt20 { margin-top:2rem !important; } .mt30 { margin-top:3rem !important; } .mt40 { margin-top:4rem !important; } .mt50 { margin-top:5rem !important; } .mt60 { margin-top:6rem !important; } .mt70 { margin-top:7rem !important; } .mt80 { margin-top:8rem !important; } .mt90 { margin-top:9rem !important; } .mt100 { margin-top:10rem !important; } .mb0 { margin-bottom:0rem !important; } /* 버튼 */ .btn { height:4.0rem; line-height:4.0rem; padding:0 2.0rem; font-size:1.6rem; color:#000; border:1px solid #b6b6b8; background:#fff; text-align:center; display:inline-block; border-radius:4px; cursor:pointer; } .buttonBig { padding:0 2.5rem; width:auto; height:56px; line-height:58px; font-size:1.8rem; font-weight:300; border-radius:28px; display:inline-block; cursor:pointer; } .buttonBig.arrow { display:inline-flex; gap:30px; padding:0 10px 0 25px; justify-content:flex-start; align-items:center; transition:all 0.3s; } .buttonBig.arrow:after { content:''; width:40px; aspect-ratio:1/1; border-radius:50%; } .buttonBig.arrow:hover { gap:45px; transition:all 0.3s;} .btn.small { height:3.0rem; line-height:3.0rem; padding:0 1.0rem; font-size:1.4rem; font-weight:300; } .purpleBtn { background:var(--gra-main); color:#fff !important; border:none; } .pinkBtn { background:var(--gra-pink); color:#fff !important; border:none; } .yellowBtn { background:var(--gra-yellow); color:#fff !important; border:none; } .blueBtn { background:var(--gra-blue); color:#fff !important; border:none; } .greenBtn { background:var(--gra-green); color:#fff !important; border:none; } .bpBtn { background:var(--gra-bp); color:#fff !important; border:none;} .greyBtn { background:#ccc; color:#555 !important; border:none; } .pinkBtn.arrow:after { background:#fff url(../images/common/btn_arw_pink.png)center; background-size:contain; } .yellowBtn.arrow:after { background:#fff url(../images/common/btn_arw_yellow.png)center; background-size:contain; } .blueBtn.arrow:after { background:#fff url(../images/common/btn_arw_blue.png)center; background-size:contain; } .greenBtn.arrow:after { background:#fff url(../images/common/btn_arw_green.png)center; background-size:contain; } .purpleBtn.arrow:after { background:#fff url(../images/common/btn_arw_purple.png)center; background-size:contain; } .border2Btn { border:2px solid #efefef; } .buttonBig.border2Btn { line-height:56px; } .brGreenBtn { border:2px solid var(--green); color:var(--text-green) !important; } .brPinkBtn { border-color:2px solid var(--pink); color:var(--text-pink) !important;} .brPurpleBtn { border-color:2px solid var(--main); color:var(--text-main) !important;} .brGreenBtn.arrow:after { background:var(--green) url(../images/common/btn_arw_white.png)center; background-size:contain; } .brPinkBtn.arrow:after { background:var(--pink) url(../images/common/btn_arw_white.png)center; background-size:contain; } .brPurpleBtn.arrow:after { background:var(--main) url(../images/common/btn_arw_white.png)center; background-size:contain; } /* 말줄임 */ .line1-text-eps { white-space:nowrap; overflow:hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display:block; } .line2-text-eps { display:block; line-height:1.5em; max-height:3em; display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; } .line3-text-eps { display:block; line-height:1.5em; max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; } .line4-text-eps { display:block; line-height:1.5em; max-height:6em; display:-webkit-box; -webkit-line-clamp:4; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; } /* 리스트 */ ul.list_bullet > li { padding-left:0.8rem; /*line-height:1.5;*/ position:relative; } ul.list_bullet > li:before { content:''; width:3px; height:3px; border-radius:50%; background:#666; display:block; position:absolute; left:0; top:0.9rem; } ul.list_bullet > li + li { margin-top:0.8rem; } /* 테이블 */ table { border-collapse:collapse; } table.table { position:relative; } table.table th, table.table td { padding:1rem 2rem; line-height:1.5; border:1px solid #dfdfdf; } table.table th { font-weight:500; color:var(--text-dkgrey); background:#f9f9f9; font-size:1.6rem; } table.table td { font-weight:300; color:var(--text-grey); background:#fff; font-size:1.5rem; } table .trDiv th, table .trDiv td { border-top-width:2px; border-top-color:#ccc; } table.table.purple .th-top th { background:var(--main); color:#fff; font-weight:300; border-color:#a6547f; } table.table.pink thead th { background:var(--pink); color:#fff; font-weight:300; border-color:#b46174; } table.table.blue thead th { background:var(--blue); color:#fff; font-weight:300; border-color:#5b8ea9; } table.table.green thead th { background:var(--green); color:#fff; font-weight:300; border-color:#72955d;} table.td-center td { text-align:center; } table .td-center { text-align:center; } table.tableS th, table.tableS td { padding:1rem; line-height:1.2; border:1px solid #efefef; font-size:1.3rem; font-weight:300; } /* check, radio 타입 */ span.check_type { position:relative; padding-left:15px; cursor:pointer; } span.check_type input[type="checkbox"], span.check_type input[type="radio"] { display:none; } span.check_type input + label { font-size:1.5rem; } span.check_type input + label:before { width:12px; height:12px; content:''; display:block; position:absolute; top:50%; left:0; background:url(../images/common/check_type.png); background-size:100%; background-position:0 -100%; transform:translateY(-50%); } span.check_type input:checked + label:before { background-position:0 0; } .notScroll { top:0; position:fixed; overflow:hidden; width:100%; } /* /////////////// Skip Navigation ////////////////////// */ .skipNav {font-size:0; line-height:0; } .skipNav a {display:block; width:100%; color:#fff; position:absolute; left:0; top:-100px; text-align:center; background:#101010; border:0 none;z-index:1000; font-size:1.4rem; } .skipNav a:focus, .skipNav a:hover, .skipNav a:active {top:0; font-weight:bold;font-size:14px;line-height:39px; outline:2px dotted red; } *:focus {/*border:1px dotted blue;*/} /* 토스트 메시지 */ .toast-container { position:fixed; left:50%; bottom:20%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:9999; pointer-events:none; } .toast-msg { min-width:260px; max-width:360px; padding:10px 14px; line-height:1.1; border-radius:8px; color:#fff; font-size:14px; line-height:1.4; box-shadow:0 4px 12px rgba(0,0,0,0.25); display:flex; align-items:flex-start; gap:8px; opacity:0; transform:translateY(12px); pointer-events:auto; animation:toast-slide-in 0.25s ease-out forwards, toast-fade-out 0.35s ease-in forwards 2.7s; } /* 타입별 스타일 */ .toast-msg.info { background:rgba(40,40,40,0.95); } .toast-msg.success { background:var(--gra-main); } .toast-msg.error { background:rgba(40,40,40,0.95); } .toast-msg.warn { background:rgba(40,40,40,0.95); } .toast-icon { flex:0 0 auto; font-size:16px; margin-top:1px; } .toast-text { flex:1 1 auto; } /* 애니메이션 - 아래에서 위로 */ @keyframes toast-slide-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes toast-fade-out { from { opacity:1; } to { opacity:0; } } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { *:focus {border:none;} html { font-size:9.5px; } /* 버튼 */ .btn { font-size:1.5rem; } .buttonBig { height:52px; font-size:1.7rem; border-radius:26px; line-height:56px; } .buttonBig.arrow { padding:0 8px 0 25px; } .buttonBig.arrow:after { width:36px; } .buttonBig.border2Btn { line-height:52px; } } @media all and (max-width: 1024px) { table.table th, table.table td { padding:1rem; font-size:1.5rem;} } @media all and (max-width: 768px) { html { font-size:9px; } .not_scroll{ position:fixed; overflow:hidden; width:100%; } /* 버튼 */ .buttonBig { height:46px; font-size:1.55rem; border-radius:23px; line-height:50px;} .buttonBig.arrow { padding:0 5px 0 23px; gap:20px; } .buttonBig.arrow:after { width:36px; } .buttonBig.border2Btn { line-height:46px; } /* 테이블 */ table.table th, table.table td { padding:1rem; } /* 리스트 */ ul.list_bullet li + li { margin-top:0.8rem; } } @media all and (max-width: 768px) { .table_wrap { overflow-x: auto; width:100%; } .table_wrap table { max-width:768px; min-width:720px;} } @media all and (max-width: 480px) { /* 버튼 */ .buttonBig { height:40px; font-size:1.5rem; border-radius:18px; font-weight:300; line-height:40px;} .buttonBig.arrow { padding:0 5px 0 20px; gap:10px; } .buttonBig.arrow:after { width:26px; } .buttonBig.border2Btn { line-height:36px; } /* 테이블 */ table.table th, table.table td { font-size:1.44rem; font-weight:300;} table.mobile_block { display:block; width:100%; border-top:1px solid #ccc; } table.mobile_block colgroup, table.mobile_block col, table.mobile_block tr, table.mobile_block th, table.mobile_block td { display:block; } table.mobile_block th { border-bottom:0; border-top:0; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// header ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .nav_wrapper { position:fixed; top:0; left:0; width:100%; transition:all 0.3s ease-out; height:110px; z-index:100; opacity:1; background:rgba(255,255,255,0.9); backdrop-filter: blur(5px); box-shadow:0 2px 10px rgba(0,0,0,0.1); } .nav_wrapper.open { background:rgba(255,255,255,1); } .nav_wrapper.scroll { top:-40px; } .nav_wrapper .inner { width:100%; max-width:1660px; margin:0 auto; padding:0 30px; display:flex; align-items:center; } .nav_wrapper.enter {-webkit-animation:enter 2s forwards; animation:enter 2s forwards; animation-delay:0s; } /* .nav_wrapper:after { position:absolute; top:100%; left:0; width:100%; height:50px; content:''; background:linear-gradient( to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0) ); } */ .headerTop { position:relative; } .headerTop .inner { justify-content:flex-end; gap:20px; height:40px; } .headerTop .memberBtns { display:flex; align-items:center; height:32px; background:var(--gra-main); border-radius:16px; padding:0 5px; } .headerTop .memberBtns a { display:flex; align-items:center; } .headerTop .memberBtns a:not(:last-child):after { display:block; content:''; width:1px; height:12px; background:rgba(255,255,255,0.3); } .headerTop .memberBtns a span { color:#fff; display:inline-block; font-size:1.4rem; padding:0 15px; line-height:32px; translate: 0 2px; } .headerTop .snsBtns { display:flex; align-items:center; gap:5px; } .headerTop .snsBtns a:not(.mall) { width:36px; aspect-ratio:1/1; border-radius:50%; } .headerTop .snsBtns a.cafe { background:url(../images/common/sns_cafe_g.png)center; background-size:contain; } .headerTop .snsBtns a.blog { background:url(../images/common/sns_blog_g.png)center; background-size:contain; } .headerTop .snsBtns a.youtube { background:url(../images/common/sns_youtube_g.png)center; background-size:contain; } .headerTop .snsBtns a.insta { background:url(../images/common/sns_insta_g.png)center; background-size:contain; } .headerTop .snsBtns a.mall { font-size:1.4rem; font-weight:300; color:var(--text-ltgrey); display:flex; align-items:center; } .headerTop .snsBtns a.mall .icon { width:36px; aspect-ratio: 1/1; background:url(../images/common/mall_icon_g.png); background-size:100%; } .headerTop .snsBtns a.mall:before {width:1px; height:12px; content:''; display:block; background:#ccc; margin:0 15px 0 10px; } .headerBottom { height:70px; } .headerBottom .inner { display:flex; justify-content:space-between; gap:30px; } .logo { width:20%; max-width:240px; display:flex; align-items:center; flex-shrink:0; } .logo a { display:block; width:100%; aspect-ratio:240/48; background:url(../images/common/logo.png)center no-repeat; background-size:100%; } .gnbWrap { flex-grow:1; max-width:1100px; height:70px; position:relative; } .gnbWrap .gnbMenu { display:flex; justify-content:flex-end; } .gnbWrap .gnbMenu .navi { display:flex; justify-content:space-between; width:100%; } .gnbWrap .gnbMenu .navi > li { text-align:center; position:relative; flex-grow:1; } .gnbWrap .gnbMenu .navi > li:last-child { /*text-align:right; flex-grow:0.5;*/ } .gnbWrap .gnbMenu .navi > li > a { color:#333; font-size:1.6rem; line-height:70px; font-weight:500; display:block; width:100%; white-space:nowrap; position:relative; } /* .gnbWrap .gnbMenu .navi .subMenu { position:absolute; top:60px; left:0; width:auto; min-width:100%; padding:15px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); z-index:1000; display:none; border-radius:0 16px 0 16px; background: var(--gra-main-90deg); } */ .gnbWrap .gnbMenu .navi .subMenu { width:100%; z-index:1000; display:none; padding:10px 5px 10px 5px; position:absolute; top:100%; left:0; width:100%; } .gnbWrap .gnbMenu .navi .subMenu li { text-align:center; } .gnbWrap .gnbMenu .navi .subMenu li a { display:block; font-size:1.5rem; color:var(--text-dkgrey); line-height:1.4; transition: all 0.3s ease; padding:8px 0; } .gnbWrap .gnbMenu .navi .on > a, .gnbWrap .gnbMenu .navi .current > a { color:var(--text-main);} .gnbWrap .gnbMenu .navi .on .subMenu { background: var(--gra-main-90deg); border-radius:1.0rem 0 2.0rem 0; } .gnbWrap .gnbMenu .navi .on .subMenu li a { color:#fff; } .gnbWrap .gnbMenu .navi .subMenu li a:hover { color:#facce3; font-weight:500; } .gnbWrap .nav-scroll-arrow { display:none;} .sitemapWrap { display:none; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .nav_wrapper { height:100px !important; } .nav_wrapper.scroll { top:0px; } .nav_wrapper .inner { padding:0; } .headerTop { position:absolute; top:0; right:20px; height:60px; display:flex; align-items:center; } .headerTop .inner { gap:4px; } .headerTop .memberBtns { height:40px; background:transparent; border-radius:0px; padding:0; } .headerTop .memberBtns a:not(.login) { display:none; } .headerTop .memberBtns a:after { display:none !important;} .headerTop .memberBtns a.login { width:40px; background:url(../images/common/icon_login.png)center no-repeat; background-size:100%; font-size:0; text-indent:-10000px;} .headerTop .memberBtns a.login span { line-height:40px; padding:0; } .headerTop .memberBtns a.login.out { width:40px; background:url(../images/common/icon_logout.png)center no-repeat; background-size:100%; font-size:0; text-indent:-10000px;} .headerTop .snsBtns { display:none; } .headerBottom { height:100px; } .headerBottom .inner { gap:0; flex-wrap:wrap; } .logo { width:100%; height:60px; padding:0 20px; } .logo a { display:block; width:auto; height:40px; aspect-ratio:240/48; } .gnbWrap { width:100%; height:40px; border-top:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; } .gnbWrap .gnbMenu { justify-content:center; } .gnbWrap .gnbMenu .navi { justify-content:space-evenly; } .gnbWrap .gnbMenu .navi > li > a { line-height:40px; font-size:1.5rem; } .gnbWrap .gnbMenu .navi .subMenu { display:none !important;} .spinner-master { z-index:100; text-align:center; display:block; width:40px; aspect-ratio: 1/1; position:relative; } .spinner-master * { transition:all 0.3s; box-sizing:border-box; } .spinner-master .spinner-spin {width:100%; height:100%; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; } .spinner-master .spinner-spin .spinner { height:2px; width:24px; padding:0; background:var(--main); border-radius:2px; } .sitemapWrap { position:fixed; z-index:1000;display:block; } .sitemapWrap .sitemapBg { position:fixed; top:0; right:-100vw; background:#fff; width:100vw; height:100%; min-height:100%; z-index:1000; transition: right 0.4s cubic-bezier(0.77,0,0.175,1); } .sitemapWrap .sitemap { width:100vw; min-height:100%; overflow-y:auto; z-index:1001; position:fixed; top:0; right:-100vw; transition: right 0.4s cubic-bezier(0.77,0,0.175,1); } .sitemapWrap.active .sitemapBg { right:0; } .sitemapWrap.active .sitemap { right:0; } .sitemap .sitemapHeader { display:flex; justify-content:space-between; align-items:center; padding:0 30px; background:var(--gra-main); height:60px; } .sitemap .sitemapHeader .memberBtns01 { display:flex; align-items:center; } .sitemap .sitemapHeader .memberBtns01 a { color:#fff; font-size:1.6rem; display:flex; align-items:center; } .sitemap .sitemapHeader .memberBtns01 a:not(:last-child):after { display:block; content:''; width:1px; height:12px; background:rgba(255,255,255,0.3); margin:0 10px; } .sitemap .menuWrap { padding:30px 20px; } .sitemap .menuWrap > li { border-top:1px solid #efefef; } .sitemap .menuWrap > li:last-child { border-bottom:1px solid #efefef; } .sitemap .menuWrap .depth01 { height:50px; padding:0 0 0 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; } .sitemap .menuWrap .depth01 a { font-size:1.8rem; font-weight:500; color:var(--text-dkgrey); flex-grow:1; } .sitemap .menuWrap .depth01.open a { color:var(--text-main); } .sitemap .menuWrap .depth01 .arrow { width:40px; height:100%; flex-shrink:0; content:''; background:url(../images/common/menu_down.png)center no-repeat; background-size:100%; } .sitemap .menuWrap .depth01.open .arrow { background:url(../images/common/menu_up.png)center no-repeat; background-size:100%; } .sitemap .menuWrap .depth02 { background:#f7f7f7; padding:8px 10px; display:none; border-top:1px solid #efefef; } .sitemap .menuWrap .depth02 a { font-size:1.6rem; color:var(--grey); font-weight:300; padding:7px 10px; position:relative; display:block; width:100%;} .sitemap .menuWrap .depth02 a.current { color:var(--text-main); font-weight:500;} .sitemap .menuWrap .depth02 a:before { width:3px; height:3px; content:''; display:block; background:var(--main); border-radius:50%; opacity:0; position:absolute; top:50%; left:0px; margin-top:-2px;} .sitemap .menuWrap .depth02 a.current:before { opacity:1; } .sitemap .snsBtns01 { display:flex; align-items:center; gap:5px; padding:0 30px; } .sitemap .snsBtns01 a:not(.mall) { width:36px; aspect-ratio:1/1; border-radius:50%; } .sitemap .snsBtns01 a.cafe { background:rgba(192,123,163,0.6) url(../images/common/sns_cafe_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.blog { background:rgba(192,123,163,0.6) url(../images/common/sns_blog_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.youtube { background:rgba(192,123,163,0.6) url(../images/common/sns_youtube_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.insta { background:rgba(192,123,163,0.6) url(../images/common/sns_insta_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.mall { font-size:1.4rem; font-weight:300; color:#fff; display:flex; align-items:center; background:rgba(192,123,163,0.6); padding:0 15px; border-radius:18px; } .sitemap .snsBtns01 a.mall .icon { width:36px; aspect-ratio: 1/1; background:url(../images/common/mall_icon_w.png); background-size:100%; } .sitemapWrap .sitemap_close { width:40px; aspect-ratio:1/1; position:relative; background:transparent; border:0;} .sitemapWrap .sitemap_close .bar { position:absolute; top:50%; left:50%; width:24px; height:2px; border-radius:2px; background:#fff; translate: -50% 0; } .sitemapWrap .sitemap_close .bar:nth-child(1) { transform:rotate(45deg); } .sitemapWrap .sitemap_close .bar:nth-child(2) { transform:rotate(-45deg); } } @media all and (max-width: 768px) { .gnbWrap .gnbMenu { width:100%; position:relative; overflow: hidden; } .gnbWrap .gnbMenu .navi { min-width:100%; width:auto; overflow-x:auto; display:flex; justify-content:flex-start; gap:12px; scrollbar-width:none; padding:0 12px; } .gnbWrap .gnbMenu .navi::-webkit-scrollbar { display:none; } .gnbWrap .gnbMenu .navi > li > a { font-size:1.5rem; font-weight:300; letter-spacing:-0.05em;} .gnbWrap .gnbMenu .navi .m_hidden { display:none; } .gnbWrap .nav-scroll-arrow { position:absolute; top:0; width:15px; height:calc(100% - 2px); border:none; z-index:100; opacity:0; pointer-events:none; transition:opacity 0.25s; } .gnbWrap .nav-scroll-arrow-right { right:0; background:rgba(255,255,255,0.8) url('../images/common/slide_next.png') center no-repeat; background-size:30px auto; } .gnbWrap .nav-scroll-arrow-left { left:0; background: rgba(255,255,255,0.9) url('../images/common/slide_prev.png') center no-repeat; background-size: 30px auto; } .gnbWrap .gnbMenu.show-arrow .nav-scroll-arrow, .gnbWrap .gnbMenu.show-arrow .nav-scroll-arrow-left { opacity:1; pointer-events:auto; } .sitemap .sitemapHeader { padding:0 20px; } .sitemap .sitemapHeader .memberBtns01 a { font-size:1.4rem;} .sitemap .menuWrap .depth01 a { font-weight:300; font-size:1.7rem;} .sitemap .menuWrap .depth02 a { font-size:1.5rem; } } @media all and (max-width: 480px) { .logo a { height:30px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// footer ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .footer { width:100%; background:var(--gra-main); border-radius:30px 30px 0 0; overflow:hidden; color:#fff; padding-top:30px; } .footer .inner { width:100%; max-width:1660px; margin:0 auto; padding:0 30px; } .certiAgency { width:100%; padding:0 40px; height:80px; display:flex; align-items:center; border-radius:40px; background:#fff; box-shadow:0 0 15px rgba(131,46,101,0.3); } .certiAgency ul { width:100%; display:flex; justify-content:space-evenly;} .footTop { margin:30px 10px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:5px; } .footTop .footMenu { display:flex; align-items:center; } .footTop .footMenu a { color:#fff; position:relative; font-size:1.5rem; display:flex; align-items:center; } .footTop .footMenu a:not(:last-child):after { content:''; display:block; width:1px; height:12px; background:rgba(255,255,255,0.2); margin:0 15px; } .footSns { display:flex; align-items:center; gap:5px; } .footSns a:not(.mall) { width:36px; aspect-ratio:1/1; border-radius:50%; } .footSns a.cafe { background:rgba(255,255,255,0.1) url(../images/common/sns_cafe_w.png)center; background-size:contain; } .footSns a.blog { background:rgba(255,255,255,0.1) url(../images/common/sns_blog_w.png)center; background-size:contain; } .footSns a.youtube { background:rgba(255,255,255,0.1) url(../images/common/sns_youtube_w.png)center; background-size:contain; } .footSns a.insta { background:rgba(255,255,255,0.1) url(../images/common/sns_insta_w.png)center; background-size:contain; } .footSns a.mall { font-size:1.4rem; font-weight:300; color:#fff; display:flex; align-items:center; background:rgba(255,255,255,0.1); padding:0 15px; border-radius:18px; } .footSns a.mall .icon { width:36px; aspect-ratio: 1/1; background:url(../images/common/mall_icon_w.png); background-size:100%; } .footBottom { margin:50px 10px 80px; display:flex; justify-content:space-between; align-items:flex-end; } .footBottom .footAddress { display:flex; gap:30px; font-size:1.5rem; color:#fff; white-space:nowrap; max-width:780px; } .footBottom .footAddress .company { font-size:2.6rem; font-weight:500; } .footBottom .footAddress .companyAdress { display:flex; flex-wrap:wrap; gap:10px 10px; } .footBottom .footAddress .companyAdress span { white-space:nowrap; } .footBottom .copyright { white-space:nowrap; font-size:1.4rem; color:rgba(255,255,255,0.8); } @keyframes enter { 25%{ opacity:0; } 100%{ opacity:1; } } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .certiAgency ul li img { height:40px; width:auto; } } @media all and (max-width: 1024px) { .certiAgency { padding:0 30px; height:66px; border-radius:33px; } .certiAgency ul { justify-content:space-between; } .certiAgency ul li img { height:30px !important; width:auto; } .footTop .footMenu a { font-size:1.4rem; } .footTop .footMenu a:not(:first-child):before { margin:0 10px; } .footBottom { margin:30px 10px 60px; flex-wrap:wrap; align-items:flex-start; } .footBottom .footAddress {flex-wrap:wrap; gap:20px; width:100%; font-size:1.4rem; } .footBottom .footAddress .companyAdress { gap:7px 10px; } .footBottom .footAddress .company { font-size:2.2rem; } .footBottom .copyright {width:100%; margin-top:25px; font-size:1.3rem; } } @media all and (max-width: 768px) { .certiAgency { height:50px; line-height:50px; border-radius:25px; padding:10px 20px;} .certiAgency ul { width:auto; max-width:100%; gap:15px; justify-content:flex-start; } .certiAgency ul li { margin-right:20px; vertical-align:middle; height:30px;} .footer { padding-top:20px; border-radius: 15px 15px 0 0; } .footer .inner { padding:0 20px; } .footTop { margin:20px 10px 0; flex-wrap:wrap; gap:10px; padding-bottom:15px; } } @media all and (max-width: 480px) { .footTop .footMenu { flex-wrap:wrap; gap:5px 0;} .footTop .footMenu a { font-size:1.3rem; } .footBottom { margin:20px 0 60px; } .footBottom .footAddress { gap:8px; font-size:1.25rem; letter-spacing:0; } .footBottom .footAddress .companyAdress { gap:3px 5px; } .footBottom .footAddress .company { font-size:1.6rem; font-weight:300; } .footBottom .copyright {margin-top:20px; font-size:1.2rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 레이어팝업 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .layerPopWrap { position:fixed; width:100%; height:100%; top:0; bottom:0; left:0; right:0; z-index:1000; display:none; } .layerPopWrap .dimmed { width:100%; height:100%; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.75); } .layerPopWrap .layerPop { position:fixed; width:90%; max-width:1000px; height:auto; top:50%; left:50%; background:#fff; border-radius:20px; transform: translate(-50%, -50%); overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.2); } .layerPop .layerPopHeader { height:60px; padding:0 35px; display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--main); } .layerPop .layerPopHeader .layerPop_tit { flex-grow:1; font-size:2.4rem; color:#fff; font-weight:500; } .layerPop .layerPopHeader .layerClose { width:40px; aspect-ratio: 1/1; flex-shrink:0; background:url(../images/common/layer_close_white.png)no-repeat center; background-size:100%; border:0; cursor:pointer; } .layerPop .layerPopCenter { padding:35px; font-size:1.6rem; color:var(--text-grey); max-height:85vh; overflow-y:auto; position:relative; } .layerPop .layerPop_tit_1 { font-size:2.0rem; color:var(--black); font-weight:500; } .layerPop .layerPop_tit_1:not(:first-child) { margin-top:30px;} /* 간편상담신청 레이어 */ #counselLayer.layerPopWrap .layerPop { height:90vh; position:relative; } #counselLayer .layerPop .layerPopCenter { height:calc(100% - 60px); padding-bottom:100px; } #counselLayer .layerPop_tit_1 small { font-size:1.4rem; font-weight:300; } #counselLayer .layerPop_tit_1 small .orange { color:var(--orange); } #counselLayer .formInputTable { display:flex; gap:5px 10px; flex-wrap:wrap; justify-content:space-between; } #counselLayer .formInputTable .inputItem { width:100%; } #counselLayer .formInputTable .inputItem:not(.w50) { width:100%; } #counselLayer .formInputTable .inputItem.w50 { width:calc(50% - 5px); } #counselLayer .formInputTable .address { display:flex; flex-direction:column; gap:3px; } #counselLayer .formInputTable .address .address_1 { display:flex; gap:10px; width:100%; } #counselLayer .formInputTable .address .address_1 > * { width:calc(50% - 5px); display:flex; } #counselLayer .formInputTable .address .address_1 .postNum { display:flex; justify-content:space-between; gap:3px; } #counselLayer .formInputTable .address .address_2 { width:100%; } #counselLayer .formInputTable .postBtn { background:#a4a4a4; padding:0 10px; border-radius:4px; border:1px solid #a4a4a4; font-size:1.6rem; color:#fff; } #counselLayer .formInputTable input[type="text"], #counselLayer .formInputTable input[type="date"], #counselLayer .formInputTable input[type="number"], #counselLayer .formInputTable select { width:100%; border:1px solid #d4d4d4; height:54px; line-height:54px; font-size:1.6rem; color:var(--text-dkgrey); font-weight:300; position:relative; border-radius:4px;} #counselLayer .formInputTable select option { font-weight:300; } #counselLayer .formInputTable .required { display:block; position:relative; } #counselLayer .formInputTable .required:before { content:'*'; color:var(--orange); font-size:1.6rem; position:absolute; top:50%; left:4px; z-index:10; translate: 0 -50%; } #counselLayer .agreeTerm { margin-top:10px; display:flex; gap:10px; margin-bottom:15px; } #counselLayer .term_view { background:#efefef; border-radius:4px; padding:0 10px; font-size:1.3rem; height:22px; line-height:24px; border:0; } #counselLayer .btmBtnWrap { display:flex; justify-content:center; gap:5px; position:absolute; bottom:0; left:0; width:100%; padding:20px 35px; background:rgba(255,255,255,0.9); } #counselLayer .btmBtnWrap .counselBtn { padding:0 80px; height:56px; background:var(--gra-main); color:#fff; font-size:2.0rem; font-weight:500; border-radius:28px; border:0; display:flex; justify-content:center; align-items:center; cursor:pointer; z-index:100; } #counselLayer .serviceSelWrap { display:flex; gap:10px; justify-content:space-between; } #counselLayer .serviceSelWrap .serviceSel { width:calc(33.3333% - 20px/3); flex-grow:1;} #counselLayer .serviceSelWrap .serviceSel input[type="radio"] { display:none; } #counselLayer .serviceSelWrap .serviceSel label { font-size:1.6rem; color:var(--black); font-weight:500; height:60px; border:2px solid #efefef; border-radius:6px; display:flex; justify-content:space-between; align-items:center; padding:0 15px; transition:all 0.3s; cursor:pointer;} #counselLayer .serviceSelWrap .serviceSel label .check { transition:all 0.3s; width:20px; aspect-ratio: 1/1; border-radius:50%; background:#efefef url(../images/common/check_icon.png)no-repeat; background-size:100%; } #counselLayer .serviceSelWrap .serviceSel.pink input:checked + label { border-color:var(--pink); color:var(--text-pink); } #counselLayer .serviceSelWrap .serviceSel.pink input:checked + label .check { background:var(--pink) url(../images/common/check_icon_white.png)no-repeat; background-size:100%; } #counselLayer .serviceSelWrap .serviceSel.blue input:checked + label { border-color:var(--blue); color:var(--text-blue); } #counselLayer .serviceSelWrap .serviceSel.blue input:checked + label .check { background:var(--blue) url(../images/common/check_icon_white.png)no-repeat; background-size:100%; } #counselLayer .serviceSelWrap .serviceSel.green input:checked + label { border-color:var(--green); color:var(--text-green); } #counselLayer .serviceSelWrap .serviceSel.green input:checked + label .check { background:var(--green) url(../images/common/check_icon_white.png)no-repeat; background-size:100%; } .termLayer { max-height:150px !important; overflow-y:auto; border:1px solid #efefef; padding:15px; } .termLayer .termTitle { font-size:1.8rem; font-weight:500; color:var(--text-dkgrey); margin-bottom:10px; } .termLayer .termDetailBox { font-size:1.5rem; line-height:1.5; color:var(--text-grey); } #counselLayer .formInputTable .inputItem .captcha_box { display:flex; gap:5px; align-items:center; } #counselLayer .formInputTable .inputItem .captcha_box .captchaImg { width:auto; height:52px; border-radius:4px; overflow:hidden;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .layerPopWrap .dimmed { display:none; } .layerPopWrap .layerPop { width:100%; max-width:initial; height:100%; border-radius:0; } .layerPop .layerPopCenter { max-height:calc(100% - 60px); } #counselLayer.layerPopWrap .layerPop { height:100vh; } } @media all and (max-width: 768px) { .layerPop .layerPopHeader { padding:0 20px; } .layerPop .layerPopHeader .layerPop_tit { font-size:2.0rem; } .layerPop .layerPopCenter { padding:20px;} .layerPop .layerPop_tit_1 { font-size:1.8rem; } #counselLayer .serviceSelWrap .serviceSel label { font-size:1.55rem; height:44px; padding:0 10px; } #counselLayer .serviceSelWrap .serviceSel label .check { width:18px; } #counselLayer .formInputTable input[type="text"], #counselLayer .formInputTable input[type="date"], #counselLayer .formInputTable input[type="number"], #counselLayer .formInputTable select { height:44px; line-height:44px; font-size:1.55rem; } #counselLayer .btmBtnWrap .counselBtn { height:50px; font-size:1.8rem; } #counselLayer .formInputTable .inputItem .captcha_box .captchaImg { height:42px;} } @media all and (max-width: 480px) { #counselLayer .serviceSelWrap { gap:3px; } #counselLayer .serviceSelWrap .serviceSel label { font-size:1.5rem; height:40px; padding:0 5px; } #counselLayer .serviceSelWrap .serviceSel label .check { width:16px; } #counselLayer .formInputTable input[type="text"], #counselLayer .formInputTable input[type="date"], #counselLayer .formInputTable input[type="number"], #counselLayer .formInputTable select { height:40px; line-height:40px; font-size:1.44rem; } #counselLayer .btmBtnWrap .counselBtn { height:44px; font-size:1.6rem; } #counselLayer .formInputTable .address .address_1 { flex-direction:column; gap:3px;} #counselLayer .formInputTable .address .address_1 > * { width:100%;} #counselLayer .formInputTable .inputItem.w50 { width:100%;} #counselLayer .formInputTable .inputItem .captcha_box .captchaImg { height:38px;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 하단고정 간편상담 신청 버튼 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .btmFixedBanner { position:fixed; bottom:0; left:0; right:0; background:linear-gradient( 90deg, rgba(199,123,163,0.75) 0%, rgba(170,144,188,0.75) 100%); padding:18px 20px; z-index:100; backdrop-filter: blur(5px); border-radius:30px 30px 0 0; opacity:1; transition:all 0.3s; } .btmFixedBanner .btmCounselWrap { display:flex; justify-content:center; align-items:center; gap:10px; color:#fff; font-size:2.0rem; font-weight:500; } .btmFixedBanner .btmCounselWrap .btmCounselInput { display:flex; gap:10px; width:500px; justify-content:space-between; } .btmFixedBanner .btmCounselWrap .inputBox { height:44px; background:#fff; padding:0 10px; border-radius:6px; flex:1 1 50%; display:flex; justify-content:center; align-items:center; } .btmFixedBanner .btmCounselWrap input[type="text"] { border:0; font-size:1.8rem; padding:0; width:100%; } .btmFixedBanner .btmCounselWrap input:focus { outline:none;} .btmFixedBanner .btmCounselWrap .btmCounselBtn { height:44px; line-height:44px; background:var(--main); color:#fff; font-size:1.8rem; font-weight:500; border-radius:6px; width:250px; border:0; display:flex; justify-content:center; align-items:center; } .btmFixedBanner.scroll { opacity:0; bottom:-200px; transition:all 0.3s;} .rightCounselBtn { transition:all 0.7s; position:fixed; right:85px; bottom:-100px; opacity:0; display:flex; justify-content:center; align-items:center; width:30rem; height:60px; border-radius:30px; background:var(--gra-bp); color:#fff; font-size:1.8rem; font-weight:500; border:0; z-index:100; } .rightCounselBtn:before { content:''; display:block; width:43px; aspect-ratio:52/40; background:url(../images/common/icon_counsel.png)center no-repeat; background-size:contain; } .rightCounselBtn.is-showing { bottom:20px; opacity:1; } .scroll-top { position:fixed; right:20px; bottom:-100px; width:60px; aspect-ratio:1/1; font-size:1.2rem; color:var(--text-main); cursor:pointer; border-radius:50%; opacity:0; z-index:105; transition: all 0.3s; display:flex; justify-content:center; align-items:center; flex-direction:column;gap:5px; background:#fff; border:1px solid var(--main); font-weight:500; } .scroll-top:before { content:''; display:block; width:13px; aspect-ratio: 1/1; background: url(../images/common/icon_top.png)center no-repeat; background-size:contain; } .scroll-top.is-showing { bottom:20px; opacity:1; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .btmFixedBanner { padding:10px 20px; border-radius:15px 15px 0 0; } .btmFixedBanner .btmCounselWrap { gap:10px; } .btmFixedBanner .btmCounselWrap p { display:none; } .btmFixedBanner .btmCounselWrap .btmCounselInput { gap:5px; } .btmFixedBanner .btmCounselWrap .inputBox { height:40px; } .btmFixedBanner .btmCounselWrap input[type="text"] { font-size:1.6rem; } .btmFixedBanner .btmCounselWrap .btmCounselBtn { height:40px; line-height:40px; font-size:1.6rem; width:auto; padding:0 20px; } .rightCounselBtn { right:75px; width:auto; height:50px; border-radius:25px; font-size:1.6rem; padding:0 30px; } .rightCounselBtn:before { width:36px; } .scroll-top { width:50px; } .scroll-top:before { width:12px; } } @media all and (max-width: 768px) { } @media all and (max-width: 480px) { .btmFixedBanner .btmCounselWrap { gap:5px; flex-wrap:wrap; } .btmFixedBanner .btmCounselWrap .inputBox { height:30px; } .btmFixedBanner .btmCounselWrap input[type="text"] { font-size:1.4rem; line-height:24px; height:24px; } .btmFixedBanner .btmCounselWrap .btmCounselBtn { height:32px; line-height:32px; width:100%; } .rightCounselBtn { right:65px; height:40px; border-radius:20px; font-size:1.4rem; } .rightCounselBtn:before { width:26px; } .scroll-top { width:40px; flex-direction:column; gap:3px; } .scroll-top:before { width:10px; } } @charset "utf-8"; /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// main 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section .innerWrap { width:100%; max-width:1800px; margin:0 auto; padding:100px 0; } .section .innerBox { width:100%; max-width:1660px; padding:0 30px; position:relative; margin:0 auto; } .section .article { display:block; } .section .article .artTit { font-size:2.6rem; font-weight:500; color:var(--text-dkgrey);} .section .article .artText { font-size:1.6rem; line-height:1.5; margin-top:1.5rem; color:var(--text-grey); } .section .article .artText strong { font-weight:500; } .section .secTit { font-size:3.6rem; font-weight:500; color:var(--text-dkgrey); margin-bottom:20px; } .section .secTitBig { font-size:4.5rem; font-weight:500; color:var(--text-dkgrey); margin-bottom:20px; line-height:1.2;} .section .roundedBox { border-radius:24px; } .section .moreView { transition:all 0.3s; width:40px; aspect-ratio:1/1; border-radius:50%; border:1px solid #ccc; background: url(../images/common/more.png)center no-repeat; background-size:100%; } .section .moreView:hover { transform:rotate(180deg); transition:all 0.3s;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .section .article .artTit { font-size:2.5rem; } .section .secTit { font-size:3.4rem; } .section .secTitBig { font-size:4.0rem; } } @media all and (max-width: 1024px) { .section .innerWrap { padding:80px 0; } .section .article .artTit { font-size:2.2rem; } .section .article .artText { font-size:1.5rem; } .section .secTit { font-size:3.0rem; margin-bottom:15px; } .section .secTitBig { font-size:3.6rem; margin-bottom:15px; } .section .roundedBox { border-radius:20px; } .section .moreView { width:36px; } } @media all and (max-width: 768px) { .section .innerWrap { padding:60px 0; } .section .innerBox { padding:0 20px; } .section .article .artTit { font-size:2.0rem; } .section .article .artText { font-size:1.5rem; } .section .secTit { font-size:2.8rem; margin-bottom:15px; } .section .secTitBig { font-size:2.8rem; margin-bottom:15px; } .section .roundedBox { border-radius:16px; } .section .moreView { width:36px; } } @media all and (max-width: 480px) { .section .innerWrap { padding:40px 0; } .section .article .artTit { font-size:1.8rem; font-weight:300; } .section .article .artText { font-size:1.4rem; } .section .secTit { font-size:2.2rem; font-weight:300; margin-bottom:12px; } .section .secTitBig { font-size:2.2rem; font-weight:300; margin-bottom:12px; } .section .roundedBox { border-radius:10px; } .section .moreView { width:26px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 속보게시판 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .boardWrap .boardItem .itemImg { width:100%; aspect-ratio:280/168; border-radius:10px; overflow:hidden; border:1px solid #efefef; } .boardWrap .boardItem .itemImg img {width:100%; height:100%; object-fit:cover; object-position:center; transition: transform 0.3s ease; } .boardWrap .boardItem:hover .itemImg img { transform: scale(1.08); } .boardWrap .boardItem .itemText { padding:15px 3px 0; } .boardWrap .boardItem .itemText .subject { font-size:1.6rem; font-weight:500; color:var(--text-black); white-space:nowrap; overflow:hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } .boardWrap .boardItem .itemText .cntText { font-size:1.4rem; color:var(--text-grey); margin-top:15px; line-height:1.5em; height:4.5em; max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; word-break:break-all;} .boardWrap .boardItem .date { margin-top:25px; color:var(--text-grey); font-size:1.3rem; } /* ================================== 반응형 ================================== */ @media all and (max-width: 768px) { .boardWrap .boardItem:hover .itemImg img { transform: scale(1); } } @media all and (max-width: 480px) { .boardWrap .boardItem .itemText .subject { font-size:1.5rem; font-weight:300; } .boardWrap .boardItem .itemText .cntText { font-size:1.4rem; margin-top:7px; line-height:1.3em; height:3.9em; max-height:3.9em; } .boardWrap .boardItem .date { margin-top:10px; font-size:1.22rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// main visual ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .mainVisualWrap { width:100%; position:relative; z-index:1; } .mainVisual { width:100%; position:relative; overflow:hidden; height:800px; } .mainVisual .visualItem { position:relative; width:100%; height:800px; overflow:hidden; } .mainVisual .visualBg {width:100%; position:relative; height:800px; transform:scale(1.1); } .visualItem .visualText { position:absolute; top:25%; left:50%; transform:translate(-50%, 0); width:100%; max-width:1500px; z-index:10; padding:0 30px; } .visualItem .visualText .text_1 { opacity:0;} .visualItem .visualText .text_1 img { height:34px; width:auto; } .visualItem .visualText .text_2 { margin-top:25px; font-size:5.4rem; line-height:1.3; color:var(--text-grey); opacity:0; } .visualItem .visualText .text_2 .crown img { width:78px; } .visualItem .visualText .text_3 { margin-top:50px; opacity:0; display:inline-block; } .visualItem .visualText strong { font-weight:500; } .visualItem .visualText small { font-size:3.6rem; } .visualItem.visual01 .visualText strong { color:var(--text-pink); } .visualItem.visual02 .visualText strong { color:var(--text-yellow); } .visualItem.visual03 .visualText strong { color:var(--text-blue); } .visualItem.visual04 .visualText strong { color:var(--text-green); } .visualItem .visualText .crown img { display:inline !important; vertical-align:middle; } .visualItem.slick-current .text_1 { animation:enterText 0.8s forwards; animation-delay:0.8s; } .visualItem.slick-current .text_2 { animation:enterText 1.0s forwards; animation-delay:1.0s; } .visualItem.slick-current .text_3 { animation:enterText 1.5s forwards; animation-delay:1.5s; } .visualItem .visualBg .visualImg { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; background-size:cover !important; } .visualItem.visual01 .visualBg .visualImg { background:url(../images/main/main_visual1.jpg)center no-repeat;} .visualItem.visual02 .visualBg .visualImg { background:url(../images/main/main_visual2.jpg)center no-repeat;} .visualItem.visual03 .visualBg .visualImg { background:url(../images/main/main_visual3.jpg)center no-repeat;} .visualItem.visual04 .visualBg .visualImg { background:url(../images/main/main_visual4.jpg)center no-repeat;} .visualItem.slick-current .visualBg{ animation:visualBg 2.0s forwards; animation-delay:0.4s; } .mainVisualWrap .slideControl { position:absolute; bottom:150px; left:50%; width:100%; max-width:1500px; translate:-50% 0; z-index:30; display:flex; gap:30px; align-items:center; padding:0 30px; } .mainVisualWrap .arrowSlider { display:flex; gap:0; align-items:center;} .mainVisualWrap .arrowSlider .arrows {width:5.0rem; aspect-ratio: 1/1; border-radius:50%; } .mainVisualWrap .arrowSlider .arrows.prev { background:rgba(255,255,255,0.5) url(../images/common/slide_prev.png)center no-repeat; background-size:contain; border:0;} .mainVisualWrap .arrowSlider .arrows.next { background:rgba(255,255,255,0.5) url(../images/common/slide_next.png)center no-repeat; background-size:contain; border:0; } .mainVisualWrap .slideControl .visualPage { font-size:1.8rem; display:flex; gap:10px; align-items:center;} .mainVisualWrap .slideControl .visualPage .bar { display:block; width:50px; height:1px; background:#999; } .mainVisualWrap .slideControl .visualPage span:not(.bar) { width:25px; text-align:center; } @keyframes visualBg { 0%{ opacity:1; transform:scale(1.1); } 100%{ opacity:1; transform:scale(1.0); } } @keyframes enterText { 0%{ opacity:0; transform: translateY(80px); } 100%{ opacity:1; transform: translateY(0); } } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .mainVisual, .mainVisual .visualItem, .mainVisual .visualBg { height:auto; aspect-ratio:1280/900; min-height:600px; max-width:100%; } .visualItem.visual01 .visualBg .visualImg { background:url(../images/main/main_visual1_m.jpg)center no-repeat;} .visualItem.visual02 .visualBg .visualImg { background:url(../images/main/main_visual2_m.jpg)center no-repeat;} .visualItem.visual03 .visualBg .visualImg { background:url(../images/main/main_visual3_m.jpg)center no-repeat;} .visualItem.visual04 .visualBg .visualImg { background:url(../images/main/main_visual4_m.jpg)center no-repeat;} .visualItem .visualText { top:28%; transform:translate(-50%, 0); } .visualItem .visualText .text_1 img { height:28px; width:auto; } .visualItem .visualText .text_2 { margin-top:20px; font-size:5.0rem; } .visualItem .visualText .text_3 { margin-top:40px; } .visualItem .visualText small { font-size:3.0rem; } } @media all and (max-width: 1024px) { .visualItem .visualText .text_1 img { height:26px; width:auto; } .visualItem .visualText .text_2 { margin-top:15px; font-size:4.0rem; } .visualItem .visualText .text_2 .crown img { width:60px; } .visualItem .visualText .text_3 { margin-top:30px; } .visualItem .visualText small { font-size:2.8rem; } .mainVisualWrap .slideControl { bottom:125px } .mainVisualWrap .arrowSlider .arrows {width:4.2rem; } .mainVisualWrap .slideControl .visualPage { font-size:1.6rem;} .mainVisualWrap .slideControl .visualPage .bar { width:40px;} } @media all and (max-width: 768px) { .mainVisual, .mainVisual .visualItem, .mainVisual .visualBg { height:auto; aspect-ratio:750/1000; min-height:initial; max-height:600px; } .visualItem.visual01 .visualBg .visualImg { background:url(../images/main/main_visual1_s.jpg)bottom left no-repeat;} .visualItem.visual02 .visualBg .visualImg { background:url(../images/main/main_visual2_s.jpg)bottom left no-repeat;} .visualItem.visual03 .visualBg .visualImg { background:url(../images/main/main_visual3_s.jpg)bottom left no-repeat;} .visualItem.visual04 .visualBg .visualImg { background:url(../images/main/main_visual4_s.jpg)bottom left no-repeat;} .visualItem .visualText { top:150px; } .mainVisualWrap .slideControl { display:none; } .mainVisual .slick-dots { position:absolute; bottom:10px; left:0; right:0; width:100%; z-index:100; display:flex; justify-content:center; gap:5px; } .mainVisual .slick-dots li { display:block; padding:0;} .mainVisual .slick-dots button { width:16px; height:16px; border-radius:50%; text-indent:-10000px; border:1px solid var(--pink); background:#fff; } .mainVisual .slick-dots .slick-active button { background:var(--pink);} } @media all and (max-width: 480px) { .visualItem .visualText { padding:0 20px; } .visualItem .visualText .text_1 img { height:18px; } .visualItem .visualText .text_2 { margin-top:15px; font-size:2.9rem; } .visualItem .visualText .text_2 .crown img { width:40px; } .visualItem .visualText .text_3 { margin-top:20px; } .visualItem .visualText small { font-size:1.44rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section01 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section01 { margin-top:-100px; z-index:20; position:relative; } .section01 .innerWrap { background:rgba(255,255,255,0.7); border-radius:60px 60px 0 0; padding:24px 0 0 0; } .section01 .innerBox { display:flex; justify-content:space-between; gap:20px; } .section01 .innerBox .service { width:calc(33.3333% - 40px/3); position:relative; transition:all 0.3s;} .section01 .innerBox a { width:100%; display:flex; align-items:center; } .service .serviceText { flex-grow:1; padding:30px 0 52px 30px; min-height:218px; } .service .serviceText .artText { opacity:0.9; } .service .serviceImg { width:40%; max-width:214px; flex-shrink:0; } .service .arrow { position:absolute; bottom:20px; left:30px; width:32px; height:32px; border-radius:50%; } .service .arrow img { width:100%; } .service01 { background:#fff1f1; border-radius:0 0 0 24px; } .service02 { background:#e1eff5; } .service03 { background:#f2f9e4; border-radius:0 0 24px 0; } .service01:hover { background:var(--gra-pink); transition:all 0.3s; border-radius:24px; } .service02:hover { background:var(--gra-blue); transition:all 0.3s; border-radius:24px; } .service03:hover { background:var(--gra-green); transition:all 0.3s; border-radius:24px; } .service:hover .artTit { color:#fff !important; transition:all 0.3s;} .service:hover .artText { color:#fff !important; opacity:0.9; transition:all 0.3s;} .service .arrow { display:block;} .service .arrow-mobile { display:none;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .section01 .innerBox a { padding-bottom:130px; } .service .serviceText { padding:20px 20px 0 20px; width:100%; min-height:initial } .service .serviceImg { width:clamp(100px,60%,160px); position:absolute; bottom:0; right:0; } } @media all and (max-width: 768px) { .section01 { margin-top:10px; } .section01 .innerBox { gap:5px;} .section01 .innerBox .service { width:calc(33.3333% - 15px/3); border-radius:10px; } .section01 .innerBox a { padding:15px 10px 10px 10px; flex-wrap:wrap; justify-content:center;} .service .serviceText { padding:0; } .service .serviceText .artTit { text-align:center; display:flex; gap:3px; align-items:center; justify-content:center; } .service .serviceText .artText { display:none; } .service .serviceImg { position:relative; bottom:initial; right:initial; width:100%; max-width:160px; margin:10px auto 0; } .service .arrow { display:none;} .service .arrow-mobile { display:block; width:20px; height:20px; line-height:0; border-radius:50%; flex-shrink:0; margin-top:-2px; } } @media all and (max-width: 480px) { .service .arrow-mobile { width:16px; height:16px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section02 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section02 { margin-top:100px; position:relative; width:100%; overflow:hidden; background:#fff;} .section02:before { content:''; width:50%; height:100%; background:linear-gradient( 0deg, rgb(251,234,214) 20%, rgb(253,247,240) 80%); position:absolute; left:0; top:0; } .section02 .innerWrap { background:linear-gradient( 0deg, rgb(251,234,214) 20%, rgb(253,247,240) 80%); border-radius:0 60px 100px 0; } .section02 .innerBox { display:flex; gap:20px; justify-content:space-between;} .section02 .innerBox > div { width:calc(50% - 10px); display:flex; gap:20px 20px; justify-content:space-between; flex-wrap:wrap; } .section02 .innerBox > div .article:not(.w100) { width:calc(50% - 10px); } .section02 .innerBox > div .article.w100 { width:100%; } .section02 .article { padding:min(4.8%, 40px); position:relative; display:block; } .sec02Left .article { background:#fff; border:1px solid #f5ebe2; } .sec02Left .article > a { display:block; width:100%;} .sec02Left .article > a:hover .artText { text-decoration:underline; } .sec02Left .article .btns { margin-top:35px; position:relative; z-index:2; } .sec02Left .article .btns li:not(:first-child) { margin-top:8px; } .sec02Left .article .btns a { display:inline-flex; gap:10px; align-items:center; font-weight:500; } .sec02Left .article .btns a .arrow { width:26px; height:26px; flex-shrink:0; display:block; border-radius:50%; line-height:1; } .sec02Left .article .btns a .arrow img { width:100%; transition:all 0.3s; transform:translate(0, 0);} .sec02Left .article .btns a:hover .arrow img { transform: translate(5px, -5px); transition:all 0.3s;} .sec02Left .article .icon { position:absolute; bottom:min(4.8%, 40px); right:min(4.8%, 40px); z-index:1; width:min(142px, 30%); } .sec02Left .article .icon img { width:100%; } .sec02Right .article:nth-child(1) { background:linear-gradient( 90deg, rgb(244,192,109) 0%, rgb(244,204,109) 100%); } .sec02Right .article:nth-child(2) { background: linear-gradient( 90deg, rgb(144,185,98) 0%, rgb(181,203,114) 100%); } .sec02Right .article:nth-child(3) { background:rgba(255,255,255,0.5); } .sec02Right .article:nth-child(1) .artTit { color:#bc642f; } .sec02Right .article:nth-child(2) .artTit { color:#547d22; } .sec02Right .article:nth-child(3) .artTit { color:var(--text-black); } .sec02Btn { margin-top:50px; height:44px; border:2px solid rgba(255,255,255,0.5); border-radius:22px; padding:0 4px 0 20px; display:inline-flex; gap:20px; align-items:center; color:#fff !important; font-weight:500; transition:all 0.3s; } .sec02Btn .arrow { background:#fff; width:32px; aspect-ratio:1/1; border-radius:50%; line-height:0;} .sec02Btn .arrow img { width:100%; } .sec02Btn:hover { gap:30px; transition:all 0.3s;} .sec02Right .article:nth-child(3) .artTextWrap { display:flex; gap:30px; justify-content:space-between; align-items:flex-end;} .sec02Right .article:nth-child(3) .artTextWrap a { width:206px; flex-shrink:0;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .section02 .innerBox { flex-wrap:wrap; } .section02 .innerBox > div { width:100%;} } @media all and (max-width: 1024px) { .section02 { margin-top:80px; } } @media all and (max-width: 768px) { .section02 { margin-top:60px; } .section02 .innerWrap { border-radius:0 20px 40px 0; } .section02 .innerBox { gap:10px;} .section02 .innerBox > div { gap:10px 10px;} .section02 .innerBox > div .article:not(.w100) { width:calc(50% - 5px); } .section02 .article { padding:min(4.8%, 40px) min(3%, 15px); } .section02 .article:not(.w100) { text-align:center;} .sec02Left .article .artText, .sec02Left .article .icon, .sec02Right .article:not(.w100) .artText { display:none;} .section02 .article:not(.w100) .artTit { text-align:center;} .sec02Right .article.w100 { display:none;} .sec02Left .article .btns { margin-top:20px;} .sec02Left .article .btns li { display:flex; justify-content:center; } .sec02Left .article .btns li:not(:first-child) { margin-top:5px; } .sec02Left .article .btns a { gap:5px;} .sec02Left .article .btns a .arrow, .sec02Btn .arrow { width:20px; height:20px; } .sec02Btn { margin:20px auto 0 auto; height:40px; border-width:1px; padding:0 4px 0 15px; gap:10px; white-space:nowrap; } } @media all and (max-width: 480px) { .section02 { margin-top:40px; } .sec02Left .article .btns a .arrow, .sec02Btn .arrow { width:16px; height:16px; } .sec02Left .article .btns { margin-top:12px;} .sec02Left .article .btns a { font-size:1.5rem; } .sec02Btn { margin:15px auto 0 auto; height:32px; font-size:1.5rem; padding:0 4px 0 10px; gap:5px;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section03 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section03 { background: linear-gradient( 0deg,rgb(245,222,222) 20%, rgb(251,234,214) 85%); position:relative; width:100%; overflow:hidden; } .section03:before { content:''; width:50%; height:100%; background:#fff; position:absolute; right:0; top:0; } .section03 .innerWrap { background:#fff; border-radius:60px 0 0 100px; } .section03 .innerBox { display:flex; gap:60px; justify-content:space-between;} .section03 .eventSection { width:min(25%, 360px); flex-shrink:0; position:relative;} .section03 .reviewSection { flex-grow:1; width:calc(75% - 60px); position:relative;} .reviewSlide { width:calc(100% + 10px); margin-left:-5px; } .reviewSlide .slideItem { } .reviewSlide .slick-slide { margin:0 10px; } .reviewWrap .arrowSlider { position:absolute; right:0; top:0; display:flex; align-items:center; } .reviewWrap .arrowSlider .arrows { width:40px; aspect-ratio:1/1; border-radius:50%; border:1px solid #ccc; } .reviewWrap .arrowSlider .arrows.prev { background:#fff url(../images/common/slide_prev.png)center no-repeat; background-size:contain; } .reviewWrap .arrowSlider .arrows.next { background:#fff url(../images/common/slide_next.png)center no-repeat; background-size:contain; } .eventWrap { padding:min(10%, 30px); position:absolute; bottom:0; left:0; height:calc(100% - 74px); display:block; width:100%; min-height:120px;} .eventWrap a { display:block; width:100%; height:100%; } .eventWrap .artTit strong { color:#fcd55f !important; font-weight:500; } .eventWrap .eventText { font-size:1.8rem; font-weight:30; margin-top:25px; line-height:1.5; position:relative; z-index:2; } .eventWrap .eventText strong { color:#fcd55f !important; font-weight:500; border-bottom:1px solid #fcd55f; } .eventWrap .eventImg { position:absolute; bottom:-30px; right:-5px; width:min(40%, 160px); z-index:1; } .eventWrap .eventImg img { width:100%; } .reviewSlide .branchInfo { display:flex; gap:7px; margin-top:10px; align-items:center; } .reviewSlide .branchName { color:var(--text-grey); font-size:1.3rem; margin-top:3px;} .reviewSlide .starScore { display:flex; align-items:center; gap:3px; } .reviewSlide .starScore:before { width:90px; aspect-ratio:124/20; background-size:contain !important; display:block; content:''; } .reviewSlide .starScore.star1:before { background:url(../images/startImg_1.png)no-repeat center;} .reviewSlide .starScore.star2:before { background:url(../images/startImg_2.png)no-repeat center;} .reviewSlide .starScore.star3:before { background:url(../images/startImg_3.png)no-repeat center;} .reviewSlide .starScore.star4:before { background:url(../images/startImg_4.png)no-repeat center;} .reviewSlide .starScore.star5:before { background:url(../images/startImg_5.png)no-repeat center;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1360px) { .eventWrap .eventText { margin-top:15px;} } @media all and (max-width: 1279px) { .section03 .innerBox { gap:40px;} .section03 .reviewSection { width:calc(75% - 40px); } .eventWrap .eventText { font-size:1.6rem; } .reviewSlide .slick-slide { margin:0 5px; } } @media all and (max-width: 1024px) { .eventWrap { height:calc(100% - 57px); } .eventWrap .eventText { font-size:1.5rem; } } @media all and (max-width: 768px) { .section03 .innerBox { flex-wrap:wrap;} .section03 .eventSection, .section03 .reviewSection { width:100%;} .reviewSlide .slick-slide { width:230px;} .reviewWrap .arrowSlider { display:none;} .eventWrap { position:relative; bottom:initial; left:initial; height:auto; padding:20px; } .eventWrap .eventText { margin-top:10px; } .eventWrap .eventText .mobile-hidden { display:none;} .eventWrap .eventImg { width:min(40%, 82px); bottom:-10px; right:10px;} } @media all and (max-width: 480px) { .section03 .innerWrap { border-radius:20px 0 0 40px; } .eventWrap .eventText { font-size:1.4rem;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section04 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section04 { position:relative; width:100%; overflow:hidden; background:#fff; } .section04:before { content:''; width:50%; height:100%; background:linear-gradient( 0deg, rgb(246,231,221) 20%, rgb(245,222,222) 80%); position:absolute; left:0; top:0; } .section04 .innerWrap { background: linear-gradient( 0deg, rgb(246,231,221) 20%, rgb(245,222,222) 80%); border-radius:0 60px 100px 0; } .quickMenuList { display:flex; justify-content:center; gap:20px;} .quickMenuList li { width:calc(20% - 80px/5); text-align:center;} .quickMenuList li .icon { width:92px; margin:0 auto; border-radius:10px; aspect-ratio:1/1 !important; display:flex; align-items:center; justify-content:center; overflow:hidden; } .quickMenuList li .icon img { width:100%; transition: all 0.3s ease; translate:0 0; } .quickMenuList li a:hover .icon img { transition: all 0.3s ease; translate:0 -10px; } .quickMenuList li .text { margin:30px auto 0; max-width:200px; } .quickMenuList li .text strong { color:var(--text-dkgrey); font-size:2.0rem; } .quickMenuList li .text strong br { display:none;} .quickMenuList li .text p { color:var(--text-ltgrey); font-size:1.4rem; line-height:1.5; margin-top:15px; } .quickMenuList li.qm01 .icon { background:rgba(199, 123, 163, 0.6);} .quickMenuList li.qm02 .icon { background:rgba(237, 163, 113, 0.6);} .quickMenuList li.qm03 .icon { background:rgba(248, 207, 103, 0.6);} .quickMenuList li.qm04 .icon { background:rgba(137, 185, 95, 0.6);} .quickMenuList li.qm05 .icon { background:rgba(125, 193, 169, 0.6);} .quickMenuList li.v-mobile { display:none;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { .quickMenuList li .text strong { font-size:1.8rem; } .quickMenuList li .text p { margin-top:10px; } } @media all and (max-width: 768px) { .section04 .innerWrap { border-radius:0;} .quickMenuList { flex-wrap:wrap; gap:20px 10px;} .quickMenuList li { width:calc(33.3333% - 20px/3); } .quickMenuList li .text { margin:10px auto 0; } .quickMenuList li .text p { display:none;} .quickMenuList li .text strong { font-size:1.5rem; line-height:1.2; display:inline-block; } .quickMenuList li .text strong br { display:initial;} .quickMenuList li.v-mobile { display:block;} .quickMenuList li.v-mobile .icon { background:rgba(255, 255, 255, 0.6);} .quickMenuList li.v-mobile .text strong { font-size:1.2rem;} } @media all and (max-width: 480px) { .quickMenuList li .icon { width:70px; } .quickMenuList li .text strong { font-size:1.4rem; } .quickMenuList li.v-mobile .text strong { font-size:1.0rem;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section05 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section05 { background:#f6e7dd; position:relative; width:100%; overflow:hidden; padding-bottom:100px;} .section05:before { content:''; width:50%; height:calc(100% - 100px); background:#fff; position:absolute; right:0; top:0; } .section05 .innerWrap { background:#fff; border-radius:60px 0 0 100px; } .section05 .innerBox { display:flex; justify-content:space-between; gap:60px; } .section05 .sec05Left { flex-grow:1; } .section05 .sec05Right { width:37.5%; flex-shrink:0; } .section05 .SecSmall { position:relative; } .section05 .moreView { position:absolute; top:0; right:0; } .pressWrap { display:flex; gap:20px; } .pressWrap .pressItem { width:calc(33.3333% - 40px/3); flex-shrink:0; } .pressWrap .pressItem a {display:block; width:100%; } .boardWrap .boardItem.pressItem .itemText .subject { line-height:1.4em; height:3em; max-height:2.8em; white-space: normal; display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word;} .noticeWrap, .faqeWrap { display:flex; flex-direction:column; gap:12px; } .noticeWrap .noticeItem, .faqeWrap .faqItem { display:flex; justify-content:space-between; align-items:center; } .noticeWrap .noticeItem .subject, .faqeWrap .faqItem .subject { flex-grow:1; font-size:1.6rem; color:var(--text-black); white-space:nowrap; overflow:hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } .noticeWrap .noticeItem .subject:hover, .faqeWrap .faqItem .subject:hover { text-decoration: underline; } .noticeWrap .noticeItem:before { content:'·'; width:10px; flex-shrink:0; } .noticeWrap .noticeItem .date { width:110px; flex-shrink:0; font-size:1.6rem; color:var(--text-ltgrey); text-align:right; } .faqSection { margin-top:60px; } .faqeWrap .faqItem .cat { width:90px; height:24px; line-height:28px; margin-right:8px; flex-shrink:0; color:#fff; border-radius:6px; text-align:center; font-size:1.4rem; display:flex; justify-content:center; align-items:center; } .faqeWrap .faqItem:nth-child(1) .cat { background:var(--gra-main); } .faqeWrap .faqItem:nth-child(2) .cat { background:var(--gra-pink); } .faqeWrap .faqItem:nth-child(3) .cat { background:var(--gra-blue); } .faqeWrap .faqItem:nth-child(4) .cat { background:var(--gra-green); } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .pressWrap { gap:10px; } .pressWrap .pressItem { width:calc(33.3333% - 20px/3); } } @media all and (max-width: 1024px) { .section05 { padding-bottom:80px;} .section05 .innerBox { flex-wrap:wrap; } .section05 .sec05Left, .section05 .sec05Right { width:100%;} .section05 .sec05Right { display:flex; gap:40px;} .section05 .sec05Right .SecSmall { width:calc(50% - 40px); margin-top:0; } } @media all and (max-width: 768px) { .section05 { padding-bottom:0px;} .section05 .innerWrap {border-radius:20px 0 0 40px; } .section05 .innerBox { gap:40px; } .section05 .sec05Right { flex-wrap:wrap; gap:40px;} .section05 .sec05Right .SecSmall { width:100%; } } @media all and (max-width: 480px) { .section05 .innerWrap {border-radius:0; } .section05 .innerBox { gap:30px; } .section05 .sec05Right { gap:30px;} .pressWrap { flex-wrap:wrap; } .pressWrap .pressItem { width:100%; } .pressWrap .pressItem a { display:flex; gap:15px; align-items:flex-start; } .pressWrap .pressItem a .itemImg { width:140px; flex-shrink:0; height:auto; } .pressWrap .pressItem .itemText { padding:0;} .boardWrap .boardItem.pressItem .itemText .subject { height:auto;} .boardWrap .boardItem.pressItem .itemText .cntText { height:auto;} .noticeWrap, .faqeWrap { gap:7px;} .noticeWrap .noticeItem .subject, .faqeWrap .faqItem .subject, .noticeWrap .noticeItem .date { font-size:1.5rem; } .faqeWrap .faqItem .cat { width:70px; height:20px; line-height:20px; margin-right:6px; border-radius:4px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section06 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .movieSection { text-align:center; } .movieSection .secTitBig strong { font-weight:500; color:var(--text-main); } .movieSection .tit_texts { font-size:1.8rem; color:var(--text-grey) !important; font-weight:300; margin-top:10px; } .movieWrap { position:relative; width:100%; aspect-ratio:15/6; margin-top:40px; border-radius:36px; overflow:hidden; } .movieWrap .movie { position:absolute; top:50%; left:50%; translate:-50% -50%; width:100%; height:100%;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { } @media all and (max-width: 768px) { .section06 { background:#f6e7dd; } .movieSection .tit_texts { font-size:1.5rem;} .movieWrap { aspect-ratio:16/9; border-radius:10px; margin-top:30px; } } @media all and (max-width: 480px) { .movieSection .tit_texts { font-size:1.333rem; margin-top:5px;} .movieWrap { margin-top:20px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section07 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section07 { margin-bottom:100px; } .branchSection { text-align:center; } .branchTabs { display:flex; height:60px; border-radius:30px; border:1px solid var(--main); width:100%; justify-content:space-around;} .branchTabs li { flex-grow:1; } .branchTabs li a { height:58px; line-height:58px; display:flex; width:100%; font-size:1.8rem; font-weight:500; color:var(--dkgrey); background:#fff; transition:all 0.3s; border-radius:30px; justify-content:center; align-items:center; gap:10px; } .branchTabs li a span { margin-bottom:-2px; } .branchTabs li a.current { background:var(--gra-main); color:#fff; transition:all 0.3s; } .branchTabs li a:after { content:''; width:8px; height:8px; border:2px solid #fff; border-width:0 2px 2px 0; display:block; rotate: 45deg; margin-top:-4px; } .branchListWrap { display:flex; justify-content:space-between; gap:40px; margin-top:40px; } .branchListWrap > div { flex-basis:calc(50% - 20px); flex-grow:1; max-width:1000px; margin:0 auto; } .branchListWrap .branchCnts { } .branchListWrap .branchCnts.active { display:block; } .branchCnts .area { height:40px; line-height:40px; font-size:1.8rem; font-weight:500; border-radius:10px 10px 0 0; } .branchCnts + .branchCnts { margin-top:10px; } .branchCnts .listTable li {display:flex; position:relative; border:2px solid transparent; } .branchCnts .listTable li:before { position:absolute; bottom:-3px; left:0; content:''; width:100%; height:1px; background:#efefef; } .branchCnts .listTable li:hover { border:2px solid var(--main); } .branchCnts .listTable li > div { padding:5px 10px; vertical-align:middle;font-size:1.5rem; color:var(--grey); } .branchCnts .listTable li > div a { color:var(--grey); } .branchCnts .listTable .branchName{ width:150px; flex-shrink:0; text-align:left; font-weight:500; display:flex; gap:5px; align-items:center; } .branchCnts .listTable .branchName a, .branchCnts .listTable .serviceArea a { display:block;} .branchCnts .listTable .branchName a span { margin-top:3px;} .branchCnts .listTable .serviceArea {flex-grow:1; text-align:left; margin-top:3px; } .branchCnts .listTable .telNum{ width:150px; flex-shrink:0; font-weight:500; display:flex; gap:5px; align-items:center; justify-content:flex-end; } .branchCnts .listTable .branchName:before {content:''; width:15px; aspect-ratio:18/23;} .listLeft .branchCnts .listTable .branchName:before { background:url(../images/common/icon_location_pink.png)center no-repeat; background-size: contain;} .listRight .branchCnts .listTable .branchName:before { background:url(../images/common/icon_location_purple.png)center no-repeat; background-size: contain;} .branchCnts .listTable .telNum a { cursor:default; pointer-events:none; } .branchCnts .listTable .telNum:before {content:''; width:12px; aspect-ratio:1/1; background:url(../images/common/icon_tel.png)center no-repeat; background-size:contain; display:none; flex-shrink:0; } .branchCnts .area:after { display:none; } .branchCnts .listTable .noBranch { text-align:center; width:100%;} .listLeft .branchCnts .area { background:#f4e5ed; color:var(--text-pink); } .listRight .branchCnts .area { background:#f1ebf5; color:var(--text-main); } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .section07 { margin-bottom:80px; } .branchTabs { height:50px; border-radius:25px;} .branchTabs li a { height:48px; line-height:48px; font-size:1.6rem; border-radius:25px; gap:5px; } .branchListWrap { gap:10px; flex-direction:column; } .branchListWrap > div { width:100% !important; } } @media all and (max-width: 768px) { .section07 { margin-bottom:60px; padding-top:60px; } .branchTabs { display:none; } .branchListWrap .branchCnts { display:none; } .branchListWrap .branchCnts.active { display:block; } .branchCnts .listTable li { flex-wrap:wrap; gap:0 5px;} .branchCnts .listTable .branchName{ order:1; flex-grow:1; } .branchCnts .listTable .serviceArea { width:100%; order:3; padding:0 0 5px 25px;} .branchCnts .listTable .telNum{ order:2; width:auto; } .branchCnts .listTable .telNum:before { display:block; flex-shrink:0; } .branchCnts .area { display:flex; height:36px; line-height:36px; justify-content:space-between; align-items:center; padding:0 15px; font-size:1.55rem; } .branchCnts .area:after { content:''; display:block; width:6px; height:6px; border:2px solid var(--pink); border-width:0 2px 2px 0; rotate: 45deg; margin-top:-4px; } .branchCnts.active .area:after { rotate: 225deg; margin-top:0;} .listRight .branchCnts .area:after { border-color: var(--purple); } .branchCnts .listTable .telNum a { pointer-events: initial; } .branchCnts .listTable .telNum a[href="tel:"] { pointer-events:none;} } @media all and (max-width: 480px) { .section07 { margin-bottom:40px; padding-top:40px; } .branchCnts .listTable .branchName:before { width:9px; } .branchCnts .listTable .branchName{ font-size:1.44rem; } .branchCnts .listTable .serviceArea { font-size:1.33rem; } .branchCnts .listTable .telNum { font-size:1.33rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section08 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section08 { margin-bottom:100px; } .section08Bg { background: url(../images/main/sec08_bg.jpg)center no-repeat; background-size:cover; border-radius:24px; overflow:hidden; padding:80px 20px; text-align:center; color:#fff; } .section08Bg a { display:block; width:100%; height:100%; color:#fff;} .section08Bg p { font-size:2.2rem; color:#fff; } .section08Bg span { font-size:2.2rem; font-weight:500; color:#fff; margin-top:10px; cursor:default; pointer-events:none; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .section08 { margin-bottom:80px; } } @media all and (max-width: 768px) { .section08 { margin-bottom:60px; } .section08Bg { background: url(../images/main/sec08_bg_mobile.jpg)center right no-repeat; background-size:cover; text-align:left; border-radius:12px; padding:30px; padding-right:40%;} .section08Bg p { font-size:1.55rem; } .section08Bg span { font-size:1.55rem; margin-top:5px; } } @media all and (max-width: 480px) { .section08 { margin-bottom:40px; } .section08Bg {padding:20px; padding-right:40%;} .section08Bg p { font-size:1.44rem; } .section08Bg span { font-size:1.44rem; margin-top:5px; } } @charset "utf-8"; .sub_page_wrap { width:100%; } .sub_page_wrap .sub_visual { width:100%; height:320px; padding-top:110px; padding-bottom:25px; border-bottom:1px solid #f5f5f5; background:url('../images/sub/sub1_visual.jpg') no-repeat center bottom; background-size:cover;} .sub_page_wrap .sub_visual .sub_tit_wrap { width:100%; max-width:1280px; padding:0 20px; height:100%; text-align:center; display:flex; justify-content:center; align-items:center; margin:0 auto;} .sub_page_wrap .sub_visual .sub_tit_wrap .sub_tit { font-size:5.5rem; font-weight:300; color:var(--text-grey); } .sub_page_wrap .sub_visual.sub1_visual { background:url('../images/sub/sub1_visual.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub2_visual { background:url('../images/sub/sub2_visual.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub3_visual { background:url('../images/sub/sub3_visual.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub4_visual { background:url('../images/sub/sub4_visual.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub5_visual { background:url('../images/sub/sub5_visual.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub6_visual { background:url('../images/sub/sub6_visual.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub7_visual { background:url('../images/sub/sub7_visual.jpg') no-repeat center bottom; background-size:cover; } .lnb_wrap { padding:0 20px;} .lnb_wrap .lnb { width:100%; max-width:1280px; margin:-30px auto 0 auto; height:60px; border:1px solid var(--main); border-radius:30px; background:#fff; display:flex; justify-content:center; align-items:center; padding:0 10px; } .lnb_wrap .lnb ul { width:100%; display:flex; justify-content:center; align-items:center; } .lnb_wrap .lnb li a { color:var(--text-dkgrey); font-size:1.8rem; font-weight:300; padding:0 40px; position:relative; } .lnb_wrap .lnb li:not(:first-child) a:before { content:''; width:4px; height:4px; background:#ccc; border-radius:50%; position:absolute; top:50%; left:0; translate:-50% -50%; } /* .lnb_wrap .lnb li a.current, .lnb_wrap .lnb li a:hover { color:var(--text-main); font-weight:500; } */ .lnb_wrap .lnb li.current a, .lnb_wrap .lnb li a:hover { color:var(--text-main); font-weight:500; } .lnb_wrap.lnb_sub7 .lnb li a { padding:0 15px; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .sub_page_wrap .sub_visual { background:url('../images/sub/sub1_visual_m.jpg') no-repeat right center; background-size:cover; } .sub_page_wrap .sub_visual.sub1_visual { background:url('../images/sub/sub1_visual_m.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub2_visual { background:url('../images/sub/sub2_visual_m.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub3_visual { background:url('../images/sub/sub3_visual_m.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub4_visual { background:url('../images/sub/sub4_visual_m.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub5_visual { background:url('../images/sub/sub5_visual_m.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub6_visual { background:url('../images/sub/sub6_visual_m.jpg') no-repeat center bottom; background-size:cover; } .sub_page_wrap .sub_visual.sub7_visual { background:url('../images/sub/sub7_visual_m.jpg') no-repeat center bottom; background-size:cover; } .lnb_wrap .lnb li a { padding:0 20px; font-size:1.65rem; } .lnb_wrap.lnb_sub7 .lnb li a { padding:0 10px; } } @media all and (max-width: 1024px) { .lnb_wrap .lnb { margin:-25px auto 0 auto; height:auto; padding:10px 20px; border-radius:25px;} .lnb_wrap .lnb ul { flex-wrap:wrap; gap:5px; } .lnb_wrap .lnb li a { font-size:1.55rem; } } @media all and (max-width: 768px) { .sub_page_wrap .sub_visual { height:220px; padding-top:100px; padding-bottom:0px; background:#fff !important; border-bottom:0; } .sub_page_wrap .sub_visual .sub_tit_wrap .sub_tit { font-size:3.2rem; } .lnb_wrap .lnb { margin:0 auto; padding:10px 5px 8px 5px; border-radius:10px; } .lnb_wrap .lnb ul { gap:5px 0; } .lnb_wrap .lnb li a { font-size:1.44rem; padding:0 10px; } .lnb_wrap .lnb li:not(:first-child) a:before { /*display:none;*/} } @media all and (max-width: 480px) { .sub_page_wrap .sub_visual { height:180px; } .sub_page_wrap .sub_visual .sub_tit_wrap .sub_tit { font-size:2.6rem; padding-top:10px; } .lnb_wrap .lnb { padding:7px 10px 5px 10px; } } /* ----------------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 3차메뉴 ////////////////////////////////////// ------------------------------------------------------------------------------------------------------*/ .snb_menu3 { display:flex; margin-bottom:30px; gap:1px; border-bottom:1px solid #ddd; } .snb_menu3 li { width:20%; flex-grow:1; background:#f1f1f1; height:4.6rem; display:flex; justify-content:center; align-items:center; border-radius:6px 6px 0 0; cursor:pointer;} .snb_menu3 li a, .snb_menu3 li span { width:100%; display:block; text-align:center; font-size:1.5rem; color:var(--text-dkgrey); margin-top:2px; cursor:pointer; } .snb_menu3 li.current { background:var(--gra-main);} .snb_menu3 li.current a, .snb_menu3 li.current span { color:#fff;} /* ================================== 반응형 ================================== */ @media all and (max-width: 768px) { .snb_menu3 li a, .snb_menu3 li span { font-size:1.4rem;} } @media all and (max-width: 480px) { .snb_menu3 li a, .snb_menu3 li span { font-size:1.3rem;} } @charset "utf-8"; /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 컨텐츠 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .sub_page { width:100%; font-size:1.6rem; line-height:1.7; color:var(--text-grey); } .sub_page .sub_inner { width:100%; max-width:1340px; padding:80px 30px 120px 30px; margin:0 auto; } .sub_page .page_tit { font-size:3.6rem; font-weight:500; color:var(--text-black); margin-bottom:25px;} .sub_page .section { margin-top:90px; } .sub_page .section.first_sec { margin-top:40px; } .sub_page .section .sec_tit{ font-size:2.6rem; font-weight:500; color:var(--text-dkgrey); margin-bottom:30px; position:relative;} .sub_page .section .sec_tit:before { content:''; width:33px; aspect-ratio: 1/1; background:url(../images/common/title_bullet.png)center; background-size:contain; position:absolute; left:0; top:0; margin-top:-5px; margin-left:-10px; z-index:-1;} .sub_page .section .sec_tit.blue:before { background:url(../images/common/title_bullet_blue.png)center; background-size:contain; } .sub_page .section .sec_tit.green:before { background:url(../images/common/title_bullet_green.png)center; background-size:contain; } .sub_page .section .sec_tit_1 { font-size:2.0rem; font-weight:500; margin-bottom:15px; margin-top:40px; } .sub_page .sec_tit_big { font-size:3.5rem; font-weight:300; color:var(--text-pink); margin-bottom:30px; line-height:1.3; } .sub_page .sec_tit_big small { font-size:1.6rem; color:var(--text-dkgrey); font-weight:300;} .sub_page strong { font-weight:500; } .text-box { border:2px solid #efefef; padding:20px; border-radius:1.0rem; } .mo_br { display:none; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { .sub_page { font-size:1.5rem; } .sub_page .sub_inner { padding:60px 20px 100px 20px; } .sub_page .section { margin-top:80px;} .sub_page .section .sec_tit { font-size:2.4rem; margin-bottom:20px;} .sub_page .section .sec_tit:before { width:26px; margin-top:-3px; margin-left:-7px; } .sub_page .section .sec_tit_1 { font-size:1.9rem; font-weight:300; margin-bottom:15px; margin-top:30px; } .sub_page .sec_tit_big { font-size:2.8rem; margin-bottom:20px; } } @media all and (max-width: 768px) { .sub_page .sub_inner { padding:50px 20px 80px 20px; } .sub_page .page_tit { font-size:2.8rem; margin-bottom:15px;} .sub_page .section { margin-top:60px;} .sub_page .section .sec_tit { font-size:2.2rem; margin-bottom:20px;} .sub_page .section .sec_tit:before { width:24px; margin-top:-3px; margin-left:-5px; } .sub_page .section .sec_tit_1 { font-size:1.8rem; margin-bottom:10px; margin-top:25px; } .sub_page .sec_tit_big { font-size:2.6rem; margin-bottom:20px; } .sub_page .sec_tit_big small { font-size:1.5rem; } } @media all and (max-width: 480px) { .sub_page { font-size:1.44rem; } .sub_page .sub_inner { padding:40px 20px 60px 20px; } .sub_page .page_tit { font-size:2.3rem; margin-bottom:10px; } .sub_page .section { margin-top:50px;} .sub_page .section .sec_tit { font-size:2.0rem; margin-bottom:15px; font-weight:300;} .sub_page .section .sec_tit:before { width:20px; margin-top:-3px; margin-left:-5px; } .sub_page .sec_tit_big { font-size:2.2rem; margin-bottom:15px; } .sub_page .sec_tit_big small { font-size:1.4rem; } .text-box { padding:15px; } .mo_br { display:initial; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 폼테이블 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .formWrap { border-radius:12px; padding:50px; background:#f9f9f9; } .formWrap .sec_tit_1 { text-align:center; margin-top:0 !important; color:var(--text-black); } .formWrap .formTable { border-top:1px solid var(--border-ltgrey); } .formWrap .formTable > tbody > tr > th, .formWrap .formTable > tbody > tr > td { padding:10px 15px; border-bottom:1px solid var(--border-ltgrey); } .formWrap .formTable .input_label { color:var(--text-dkgrey); font-weight:300; width:20%; max-width:200px; white-space:nowrap;} .formWrap .formTable input[type="text"], .formWrap .formTable input[type="password"], .formWrap .formTable select { height:4.0rem; line-height:4.0rem; border-radius:4px; } .formWrap .formTable .input_label label { display:flex; align-items:center; align-items:center; } .formWrap .formTable .input_label label:before { content:''; color:var(--orange); width:12px; flex-shrink:0; } .formWrap .formTable .input_label label.required:before { content:'*'; color:var(--orange); } .formWrap .formTable .post_num { display:flex; align-items:center; gap:5px; width:100%; } .formWrap .formTable .captcha_box { display:flex; gap:5px; align-items:center; } .formWrap .formTable .captcha_box .captchaImg { height:4.0rem; } .formWrap .formTable .input_short { max-width:180px; } .formWrap .formTable .selectGroup { display:flex; gap:15px; flex-wrap:wrap;} .formWrap .formTable .selectGroup span { display:flex; align-items:center; gap:5px;} .formWrap .formTable small { font-size:1.4rem; line-height:1.2; } .formWrap .btmBtns { margin-top:3.0rem; display:flex; justify-content:center; gap:5px; } .formWrap .btmBtns .buttonBig { width:calc(50% - 5px/2); max-width:200px; text-align:center;} .formWrap .formTable .flexBox { display:flex; align-items:center; gap:5px; width:100%;} .formWrap .formTable .telNum select, .formWrap .formTable .telNum input[type="text"] { width:30%; flex-grow:1; } .formWrap .formTable .addressBox #zip { max-width:140px; flex-shrink:0; } .formWrap.type01 { padding:0 !important; background:#fff !important; border-top:2px solid var(--main); border-radius:0 !important; } .formWrap.type01 th { background:#f9f9f9; } /*베이비시터 온라인예약*/ #gift_select .text-box b { display:block; margin-bottom:10px;} .serviceTerm { display:flex; gap:10px; align-items:center; width:100%; max-width:800px;} .serviceTerm + .serviceTerm { margin-top:10px; } .serviceTerm b { width:60px; flex-shrink:0; } .serviceTerm > div { display:flex; align-items:center; gap:5px; flex-grow:1; max-width:700px; } .serviceTerm > div > span { width:calc(33.3333% - 10px/3); color:var(--text-ltgrey); font-size:1.5rem; gap:5px; display:flex; align-items:center; white-space:nowrap;} .serviceTerm span select { width:calc(100% - 50px); flex-shrink:0;} #short_term, #long_term { width:100%;} #long_term .selectGroup { padding-left:70px; margin-top:10px;} #long_term .serviceTerm > div { gap:20px;} #long_term .serviceTerm > div > span { width:auto; flex-grow:1; } #long_term .serviceTerm span select { min-width:180px;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { /*베이비시터 온라인예약*/ .serviceTerm b { width:40px; } .serviceTerm span select { width:calc(100% - 40px);} #long_term .selectGroup { padding-left:50px;} #long_term .serviceTerm span select { min-width:unset; flex-grow:1;} } @media all and (max-width: 768px) { .formWrap { padding:20px; } .formWrap .formTable .selectGroup { gap:10px; } .formWrap .formTable .captcha_box { flex-wrap:wrap;} .formWrap .formTable .captcha_box small { width:100%; } /*베이비시터 온라인예약*/ .serviceTerm { flex-wrap:wrap; gap:5px; } .serviceTerm b { width:100%; } .serviceTerm > div { gap:0;} .serviceTerm > div > span { font-size:1.3rem; width:33.3333%;} .serviceTerm span select { width:calc(100% - 30px); padding:0 2px;} #long_term .selectGroup { padding-left:0px;} } @media all and (max-width: 480px) { .formWrap .formTable > tbody > tr > th, .formWrap .formTable > tbody > tr > td { display:block; } .formWrap .formTable .input_label { width:100%; max-width:initial; border-bottom:0; background:#f9f9f9; text-align:center; padding:10px 5px; } .formWrap .formTable .input_box { display:flex; gap:5px; align-items:center; flex-wrap:wrap; padding:0px 0 15px 0; justify-content:space-between; } .formWrap .formTable .input_short { max-width:initial; } .formWrap .formTable .button { padding:0 10px; } .formWrap .formTable .addressBox { flex-wrap:wrap;} .formWrap .formTable .addressBox #zip { max-width:100%; } .formWrap.type01 .formTable .input_label { background:#f4f4f4; } .formWrap.type01 .formTable .input_box { padding:10px 5px 15px;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 참사랑어머니회 > 회사소개 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .company_top { text-align:center; } .company_top img { max-width:240px; margin-bottom:10px; } .pride_img { text-align:center; width:100%; max-width:974px; margin:0 auto; } .pride_company { text-align:center; margin-top:10px;} .pride_company img { width:50%; max-width:240px; margin:0 auto 5px; } .pride_img .for_large { display:inline; } .pride_img .for_small { display:none;} .systemInfoWrap .systemInfo01 { display:flex; justify-content:space-between; } .systemInfoWrap .systemInfo01 li:not(.plus) { display:flex; align-items:center; justify-content:center; height:72px; border-radius:36px; background:#f4e5ed; color:var(--dkgrey); font-weight:500; width:calc(33.333% - 100px/3); position:relative; text-align:center; line-height:1.2em; padding:0 10px;} .systemInfoWrap .systemInfo01 li.plus { width:50px; flex-shrink:0; background:url(../images/sub/plus_grey.png)center no-repeat; } .systemInfoWrap .systemInfo02 { text-align:center; position:relative; width:100%; margin-top:30px; height:20px;} .systemInfoWrap .systemInfo02:before { position:absolute; top:50%; left:50%; transform:translateX(-50%); width:calc(66.666% + 100px/3); height:1px; background:#ccc; content:''; z-index:-1;} .systemInfoWrap .systemInfo02 span { background:#fff; color:var(--text-black); font-weight:500; display:inline-block; padding:0 10px; } .systemInfoWrap .systemInfo01 li:first-child:after, .systemInfoWrap .systemInfo01 li:last-child:after { content:''; position:absolute; top:100%; left:50%; width:1px; height:40px; display:block; background:#ccc; } /* ================================== 반응형 ================================== */ @media all and (max-width: 768px) { .pride_img { max-width:360px; } .pride_img .for_large { display:none; } .pride_img .for_small { display:inline;} .systemInfoWrap .systemInfo01 li:not(.plus) { width:calc(33.333% - 60px/3); } .systemInfoWrap .systemInfo01 li.plus { width:30px; background:url(../images/sub/plus_grey.png)center no-repeat; background-size:16px auto; } .systemInfoWrap .systemInfo02:before { width:calc(66.666% + 60px/3); } } @media all and (max-width: 480px) { .systemInfoWrap .systemInfo01 li:not(.plus) { width:calc(33.333% - 40px/3); height:auto; aspect-ratio: 1/1; border-radius:50%; } .systemInfoWrap .systemInfo01 li.plus { width:20px; background:url(../images/sub/plus_grey.png)center no-repeat; background-size:10px auto; } .systemInfoWrap .systemInfo02:before { width:calc(66.666% + 40px/3); } .systemInfoWrap .systemInfo02 span { font-weight:300; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 참사랑어머니회 > 연혁 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .history_major { background:#f8f7f5 url(../images/sub/sub1/history_img.jpg)top right no-repeat; background-size:cover; padding:50px; border-radius:24px; } .history_major .list_bullet li + li { margin-top:10px;} .history_major .list_bullet strong { font-weight:500; } .history_major .list_bullet li br { display:none;} .history_wrap .history_box { display:flex; gap:60px; } .history_wrap .history_box .year { font-size:2.6rem; color:var(--text-pink); font-weight:700; width:100px; flex-shrink:0; font-family:'pretendard';} .history_wrap .history_box .line { width:1px; background:var(--pink); position:relative; } .history_wrap .history_box .line:after { content:''; display:block; width:8px; height:8px; background:#fff; border:4px solid var(--pink); position:absolute; top:8px; left:-8px; border-radius:50%; } .history_wrap .history_box .histiry_list { padding-top:5px; } .history_wrap .history_box:not(:last-child) .histiry_list { padding-bottom:40px; } .history_wrap .history_box .histiry_list li { display:flex; gap:10px; } .history_wrap .history_box .histiry_list li + li { margin-top:10px; } .history_wrap .history_box .histiry_list li .month { color:var(--text-black); width:30px; text-align:right; flex-shrink:0; font-family:'pretendard'; font-weight:500; } .history_wrap .history_box .histiry_list li br { display:none; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { .history_major { padding:30px; } } @media all and (max-width: 768px) { .history_major { padding-bottom:100px; background-size:100%; background-position-y:bottom; } .history_wrap .history_box .histiry_list li + li { margin-top:7px; } .history_wrap .history_box { gap:20px; } .history_wrap .history_box:not(:last-child) .histiry_list { padding-bottom:30px; } .history_wrap .history_box .year { font-size:2.2rem; width:60px;} } @media all and (max-width: 480px) { .history_major { padding:24px 20px 60px 20px; border-radius:8px; } .history_major .list_bullet li br { display:initial;} .history_wrap .history_box { gap:8px; } .history_wrap .history_box .line:after { width:6px; height:6px; border-width:3px; top:8px; left:-6px; } .history_wrap .history_box .year { font-size:2.0rem; font-weight:500; width:50px;} .history_wrap .history_box .histiry_list li .month { width:26px; } .history_wrap .history_box .histiry_list li br { display:initial; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 참사랑어머니회 > 오시는길 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .mapWrap .mapDiv { width:100%; overflow:hidden; } .mapWrap .mapDiv .root_daum_roughmap, .mapWrap .mapDiv .root_daum_roughmap .wrap_map {height:36.0rem; width:100%; } .directionsWrap { display:flex; gap:50px; flex-wrap:wrap; justify-content: space-between;} .contactWrap li { display:flex; } .contactWrap li strong { width:80px; flex-shrink:0; color:var(--text-dkgrey); font-weight:500; } .contactWrap li + li { margin-top:10px; } .contactWrap li .telNum { display:flex; } .contactWrap li .telNum span + span:before { content:'|'; margin:0 10px;} .transWrap .transBox { display:flex; position:relative; gap:4.0rem;} .transWrap .transBox:not(:first-child) { margin-top:5.0rem; } .transWrap .transBox .icon { width:8rem; height:8.0rem; flex-shrink:0; background:#efefef; border-radius:50%; display:flex; justify-content:center; align-items:center;} .transWrap .transBox .trans { flex-grow:1; } .transWrap .transBox .trans h4 { font-size:2.0rem; color:var(--text-dkgrey); font-weight:500; margin-bottom:1.0rem; } .transWrap .transBox .trans .transDesc [class*="subway"] { width:2.4rem; height:2.4rem; line-height:2.6rem; text-align:center; color:#fff; display:inline-block; border-radius:50%;} .transWrap .transBox .trans .transDesc .subway2 { background:#3cb44a; } .transWrap .transBox .trans .transDesc .subway4 { background:#02a0dc; } .transWrap .transBox .trans .transDesc [class*="bus"] { color:#fff; padding:0 1rem; border-radius:3px; margin-right:5px; height:2.4rem; line-height:2.6rem; display:inline-block;} .transWrap .transBox .trans .transDesc .bus01 { background:#4b5cd2; } .transWrap .transBox .trans .transDesc .bus02 { background:#4fa92c; } .transWrap .transBox .trans .transDesc p + p { margin-top:10px;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { .transWrap .transBox:not(:first-child) { margin-top:5.0rem; } } @media all and (max-width: 768px) { .mapWrap .mapDiv .root_daum_roughmap, .mapWrap .mapDiv .root_daum_roughmap .wrap_map {height:30.0rem; } .transWrap .transBox { gap:3.0rem;} .transWrap .transBox:not(:first-child) { margin-top:4.0rem; } .transWrap .transBox .trans h4 { font-size:1.8rem; } } @media all and (max-width: 480px) { .contactWrap li strong { width:50px;} .contactWrap li .telNum { flex-wrap:wrap; gap:5px;} .contactWrap li .telNum span { width:100%; } .contactWrap li .telNum span + span:before { display:none;} .transWrap .transBox { gap:2.0rem;} .transWrap .transBox:not(:first-child) { margin-top:3.0rem; } .transWrap .transBox .icon { width:6rem; height:6.0rem; } .transWrap .transBox .trans h4 { font-size:1.6rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 정부지원산후관리사 > 산모신생아 건강관리사 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .sub3_1 { display:flex; gap:50px; } .sub3_1 .left { width:320px; border-radius:24px 0 0 0; overflow:hidden; flex-shrink:0; background: url(../images/sub/sub2/sub2_1_img.jpg)top center no-repeat; background-size:100%; } .sub3_1 .right .section:first-child { margin-top:0; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { .sub3_1 .left { width:30%; gap:30px;} } @media all and (max-width: 768px) { .sub3_1 { flex-wrap:wrap; } .sub3_1 .left { order:2; width:100%; max-width:360px; margin:0 auto; aspect-ratio: 4/3; background: url(../images/sub/sub2/sub2_1_img.jpg)center center no-repeat; background-size:100%; border-radius:10px;} .sub3_1 .right { order:1; width:100%; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 정부지원산후관리사 > 신청및절차 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .sub2_2_stepWrap { background:#f2f4f8; border-radius:24px 0; padding:40px; } .sub2_2_step { width:100%; display:flex; justify-content:space-between; } .sub2_2_step li { display:flex; align-items:center; padding:20px 30px; justify-content:center; gap:15px; } .sub2_2_step li:not(.arrow) { flex-grow:1; background:#fff; border-radius:10px; } .sub2_2_step li .icon { width:100px; aspect-ratio: 1/1; flex-shrink:0; } .sub2_2_step li:nth-child(1) .icon { background:url(../images/sub/sub2/step_icon1.png)center no-repeat; background-size:contain; } .sub2_2_step li:nth-child(3) .icon { background:url(../images/sub/sub2/step_icon2.png)center no-repeat; background-size:contain; } .sub2_2_step li:nth-child(5) .icon { background:url(../images/sub/sub2/step_icon3.png)center no-repeat; background-size:contain; } .sub2_2_step li .text { font-size:2.2rem; color:var(--text-pink); font-weight:500; padding-right:15px; } .sub2_2_step li .text small { font-size:1.6rem; color:var(--text-grey); font-weight:300; display:block;} .sub2_2_step li.arrow { width:40px; flex-shrink:0; background: url(../images/sub/step_arrow_pink.png)center no-repeat; background-size:17px;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .sub2_2_stepWrap { padding:30px; } .sub2_2_step li { padding:15px 20px; } .sub2_2_step li .icon { width:80px; } .sub2_2_step li .text { font-size:2.0rem; } .sub2_2_step li .text small { font-size:1.4rem; } .sub2_2_step li.arrow { width:30px; background-size:13px;} } @media all and (max-width: 1024px) { .sub2_2_stepWrap { padding:20px; } .sub2_2_step li { padding:10px 15px; gap:5px; } .sub2_2_step li .icon { width:60px; } .sub2_2_step li .text { font-size:1.8rem; } .sub2_2_step li .text small { font-size:1.3rem; } .sub2_2_step li.arrow { width:25px; background-size:11px;} } @media all and (max-width: 768px) { .sub2_2_step li { flex-wrap:wrap;} .sub2_2_step li .icon { width:50px; margin:0 auto; } .sub2_2_step li .text { font-size:1.8rem; width:100%; text-align:center; } .sub2_2_step li .text small { font-size:1.2rem; } .sub2_2_step li.arrow { width:20px; background-size:9px;} } @media all and (max-width: 480px) { .sub2_2_stepWrap { border-radius:12px 0; } .sub2_2_step { flex-wrap:wrap; gap:5px; } .sub2_2_step li:not(.arrow) { width:100%; } .sub2_2_step li { flex-wrap:nowrap; justify-content:center; gap:10px;} .sub2_2_step li .icon { margin:0;} .sub2_2_step li .text { text-align:left; font-size:1.6rem; width:100px; } .sub2_2_step li.arrow { transform: rotate(90deg); width:100%;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 정부지원산후관리사 > 서비스내용 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .sub2_service_list { display:flex; gap:30px; flex-wrap:wrap; } .sub2_service_list .sub2_service_item { width:calc(50% - 15px); background:#fff; border:2px solid #f2f4f8; border-radius:12px; padding:20px; display:flex; gap:20px;} .sub2_service_list .sub2_service_item .sub2_service_img { width:40%; max-width:214px; flex-shrink: 0; } .sub2_service_list .sub2_service_item .sub2_service_img .service_img { width:100%; aspect-ratio: 1/1; border-radius:10px; } .sub2_service_list .sub2_service_item .sub2_service_cont .sec_tit_1 { margin-top:0; } .sub2_service_list .sub2_service_item:nth-child(1) .sub2_service_img .service_img{ background:url(../images/sub/sub2/sub2_service_img01.png)center no-repeat; background-size:cover; } .sub2_service_list .sub2_service_item:nth-child(2) .sub2_service_img .service_img{ background:url(../images/sub/sub2/sub2_service_img02.png)center no-repeat; background-size:cover; } .sub2_service_list .sub2_service_item:nth-child(3) .sub2_service_img .service_img{ background:url(../images/sub/sub2/sub2_service_img03.png)center no-repeat; background-size:cover; } .sub2_service_list .sub2_service_item:nth-child(4) .sub2_service_img .service_img{ background:url(../images/sub/sub2/sub2_service_img04.png)center no-repeat; background-size:cover; } .sub2_service_list .sub2_service_item:nth-child(5) .sub2_service_img .service_img{ background:url(../images/sub/sub2/sub2_service_img05.png)center no-repeat; background-size:cover; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .sub2_service_list { gap:20px; } } @media all and (max-width: 1024px) { .sub2_service_list { gap:10px; } } @media all and (max-width: 768px) { .sub2_service_list .sub2_service_item { width:100%; gap:10px; padding:15px;} } @media all and (max-width: 480px) { .sub2_service_list .sub2_service_item { width:100%; flex-wrap:wrap; gap:20px;} .sub2_service_list .sub2_service_item .sub2_service_img { width:100%; max-width:initial;} .sub2_service_list .sub2_service_item .sub2_service_img .service_img { width:100%; aspect-ratio:520/300; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 정부지원산후관리사 > 산모신생아 건강관리사 교육기관 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .edu_branch tbody tr .branch a { color:var(--text-black) !important; font-weight:500;} .edu_branch tbody tr .tel { cursor:default; pointer-events:none; text-align:center; } /* ================================== 반응형 ================================== */ @media all and (max-width: 768px) { .edu_branch .tel { cursor:pointer; pointer-events:initial; } .edu_branch thead { display:none; } .edu_branch tbody tr { display:flex; flex-wrap:wrap; border:1px solid var(--border-ltgrey); width:100%; justify-content:space-between;} .edu_branch tbody tr th { width:100%; } .edu_branch tbody tr td { border:0; padding:0; } .edu_branch tbody tr .area { order:1;} .edu_branch tbody tr .branch { order:2; padding:10px 0 0 10px; } .edu_branch tbody tr .tel { order:3; flex-grow:1; padding:10px 10px 0 15px; text-align:left; display:flex; align-items:center; gap:3px; color:var(--text-black) !important; } .edu_branch tbody tr .tel:before { content:''; width:12px; aspect-ratio:1/1; background:url(../images/common/icon_tel.png)center no-repeat; background-size:contain; margin-top:-2px; } .edu_branch tbody tr .address { order:4; width:100%; padding:10px;} .edu_branch tbody tr .branch a { white-space:nowrap; color:var(--text-pink) !important; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 서비스안내 > 산후관리사/프리미엄 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .sub3_1_top { background:#f5f4f3 url(../images/sub/sub3/sub3_1_img01.png)center right no-repeat; background-size:contain; padding:40px; border-radius:24px 0 0 0; } .sub3_step { width:100%; display:flex; justify-content:space-between; gap:10px; } .sub3_step li { display:flex; justify-content:center; align-items:center; } .sub3_step li:not(.arrow) { flex-grow:1; background:#fff; border-radius:10px; padding:30px; gap:15px; width:calc(25% - 38px * 3 / 4); } .sub3_step li .icon { width:60px; aspect-ratio:1/1; flex-shrink:0; display:flex; align-items:center;} .sub3_step li .icon img { width:100%; } .sub3_step li .text { font-size:2.0rem; font-weight:500; line-height:1.25; } .sub3_step li .text small { font-size:1.6rem; color:var(--text-grey); font-weight:300; display:block; } .sub3_step li.arrow { width:18px; flex-shrink:0; background-size:contain !important;} .sub3_step.service01_step li { background:#f9f2f4; } .sub3_step.service01_step li.arrow { flex-shrink:0; background: url(../images/sub/step_arrow_pink.png)center no-repeat; } .sub3_step.service01_step li .text { color:var(--text-pink); } .premium_service { background:#f2f7fa url(../images/sub/sub3/sub3_1_img02.png)no-repeat left bottom; background-size:485px; padding:40px; padding-left:485px; border-radius:24px 0 0 0; } .pms_infog { display:flex; gap:10px; align-items:center; margin-top:30px; } .pms_infog span:not(.sign) { width:140px; aspect-ratio:1/1; border-radius:50%; background:#e4cdd6; display:flex; justify-content:center; align-items:center; padding:10px; text-align:center; line-height:1.25; } .pms_infog span:nth-child(5) { background:var(--pink); color:#fff; } .pms_infog span.sign { width:22px; aspect-ratio:1/1; } .pms_infog span.sign.plus { background:url(../images/sub/plus_pink.png)no-repeat center; background-size:100%; } .pms_infog span.sign.eq { background:url(../images/sub/eq_pink.png)no-repeat center; background-size:100%; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .sub3_step { gap:5px; } .sub3_step li:not(.arrow) { padding:20px; gap:10px; } .sub3_step li .icon { width:50px; } .sub3_step li .text { font-size:2.0rem; } .sub3_step li .text small { font-size:1.4rem; } .premium_service { background-size:40%; padding:30px 30px 30px 40%; } } @media all and (max-width: 1024px) { .sub3_step li:not(.arrow) { flex-direction:column; justify-content:flex-start; align-items:flex-start;} .sub3_step li .icon { margin:0 auto; } .sub3_step li .text { font-size:1.8rem; width:100%; text-align:center; } .sub3_step li .text { font-size:1.9rem; } .sub3_step li .text small { font-size:1.3rem; height:1.3rem; } .sub3_step li.arrow { width:12px; } } @media all and (max-width: 768px) { .sub3_1_top { padding:30px 30px 0 30px; border-radius:24px 0 0 0; background:#f5f4f3; } .sub3_1_top:after { content:''; display:block; width:calc(100% + 60px); margin-left:-30px; margin-top:20px; aspect-ratio:550/240; background:url(../images/sub/sub3/sub3_1_img01.png)center right no-repeat; background-size:cover; } .sub3_step { gap:5px; } .sub3_step li:not(.arrow) { padding:15px 8px; gap:10px; } .sub3_step li .text { font-size:1.6rem; } .sub3_step li .icon { width:60%; max-width:50px; } .sub3_step li .text small { font-size:1.2rem; } .sub3_step li.arrow { width:10px; } .premium_service { background:#f5f8fe; padding:30px; } .premium_service:after { content:''; display:block; width:100%; margin-top:20px; aspect-ratio:440/240; background:url(../images/sub/sub3/sub3_1_img02.jpg)center no-repeat; background-size:cover; border-radius:10px; } } @media all and (max-width: 480px) { .sub3_1_top { padding:20px 20px 0 20px; } .sub3_1_top:after { width:calc(100% + 40px); margin-left:-20px; } .sub3_1_top .sec_tit_big br { display:none; } .sub3_step { gap:2px; } .sub3_step li .text { font-size:1.4rem; } .sub3_step li.arrow { width:8px; } .premium_service { padding:20px; } .pms_infog { margin-top:15px; } .pms_infog span:not(.sign) { width:calc(33.3333% - 32px/3); } .pms_infog { gap:3px; } .pms_infog span.sign { width:10px; aspect-ratio:1/1; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 서비스안내 > 베이비시터 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .sub3_2_top { background:#f5f4f3 url(../images/sub/sub3/sub3_2_img01.png)center right no-repeat; background-size:contain; padding:40px; border-radius:24px 0 0 0; } .sub3_step.service02_step li { background:#f3f7f9; } .sub3_step.service02_step li.arrow { flex-shrink:0; background: url(../images/sub/step_arrow_blue.png)center no-repeat; } .sub3_step.service02_step li .text { color:var(--text-blue); } .branchList { } .branchList .listTable { display:flex; flex-wrap:wrap; gap:0 20px; line-height:1.3; } .branchList .listTable li:nth-child(-n+2) { border-top:2px solid #ccc; } .branchList .listTable li {display:flex; position:relative; width:calc(50% - 10px); border-bottom:1px solid #efefef; position:relative; } .branchList .listTable li:hover:before { border:2px solid var(--main); position:absolute; top:-1px; left:0; width:100%; height:100%; content:''; pointer-events:none; } .branchList .listTable li > div { padding:10px; vertical-align:middle;font-size:1.5rem; color:var(--grey); } .branchList .listTable li > div a { color:var(--grey); display:block;} .branchList .listTable .branchName{ width:150px; flex-shrink:0; text-align:left; font-weight:500; display:flex; gap:5px; align-items:center; } .branchList .listTable .branchName a { display:block;} .branchList .listTable .branchName a span { margin-top:3px;} .branchList .listTable .serviceArea {flex-grow:1; text-align:left; display:flex; align-items:center; } .branchList .listTable .telNum{ width:150px; flex-shrink:0; font-weight:500; display:flex; gap:5px; align-items:center; justify-content:flex-end; } .branchList .listTable .branchName:before {content:''; width:15px; aspect-ratio:18/23;} .branchList .listTable .branchName:before { background:url(../images/common/icon_location_pink.png)center no-repeat; background-size: contain;} .branchList .listTable .telNum a { cursor:default; pointer-events:none; } .branchList .listTable .telNum:before {content:''; width:12px; aspect-ratio:1/1; background:url(../images/common/icon_tel.png)center no-repeat; background-size:contain; display:none; } .branchList .area:after { display:none; } .branchList .listTable .main-branch .serviceArea { display:none; } .branchList .listTable .main-branch .telNum { flex-grow:1; } .branchList.babysitter .listTable li:hover:before { border-color:var(--blue); } .branchList.babysitter .listTable .branchName:before { background:url(../images/common/icon_location_blue.png)center no-repeat; background-size: contain;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .branchList .listTable {gap:0; } .branchList .listTable li:nth-child(2) { border-top:0; } .branchList .listTable li { width:100%; } } @media all and (max-width: 768px) { .sub3_2_top { padding:30px 30px 0 30px; border-radius:24px 0 0 0; background:#f5f4f3; } .sub3_2_top:after { content:''; display:block; width:calc(100% + 60px); margin-left:-30px; margin-top:20px; aspect-ratio:550/240; background:url(../images/sub/sub3/sub3_2_img01.jpg)center right no-repeat; background-size:cover; } .branchList .listTable li { flex-wrap:wrap; gap:0 5px;} .branchList .listTable .branchName{ order:1; flex-grow:1; width:auto; } .branchList .listTable .serviceArea { width:100%; order:3; padding:0 0 5px 25px;} .branchList .listTable .telNum{ order:2; width:auto; flex-grow:1; } .branchList .listTable .telNum:before { display:block;} .branchList .area { display:flex; height:36px; line-height:36px; justify-content:space-between; align-items:center; padding:0 15px; font-size:1.55rem; } .branchList.area:after { content:''; display:block; width:6px; height:6px; border:2px solid var(--pink); border-width:0 2px 2px 0; rotate: 45deg; margin-top:-4px; } .branchList .listTable .telNum a { pointer-events: initial; } .branchList .listTable .main-branch .telNum:before { display:none;} } @media all and (max-width: 480px) { .sub3_2_top { padding:20px 20px 0 20px; } .sub3_2_top:after { width:calc(100% + 40px); margin-left:-20px; } .sub3_2_top .sec_tit_big br { display:none; } .branchList .listTable .branchName:before { width:9px; } .branchList .listTable .branchName{ font-size:1.44rem; } .branchList .listTable .serviceArea { font-size:1.33rem; } .branchList .listTable .telNum { font-size:1.33rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 서비스안내 > 가사관리사 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .sub3_3_top { background:#fbfbfb url(../images/sub/sub3/sub3_3_img01.png)center right no-repeat; background-size:contain; padding:40px; border-radius:24px 0 0 0; } .sub3_step.service03_step li { background:#f6f8f2; } .sub3_step.service03_step li.arrow { flex-shrink:0; background: url(../images/sub/step_arrow_green.png)center no-repeat; } .sub3_step.service03_step li .text { color:var(--text-green); } .sub3_3_service { display:flex; flex-wrap:wrap; gap:20px; } .sub3_3_service li { position:relative; width:calc(25% - 20px *3 / 4); aspect-ratio:3/2; border-radius:10px; overflow:hidden; } .sub3_3_service li:after { content:''; position:absolute; bottom:0; left:0; width:100%; height:100px; background:linear-gradient( 0deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%); opacity:0.6; z-index:1; } .sub3_3_service li span { position:absolute; bottom:0; left:0; width:100%; color:#fff; text-align:center; line-height:40px; height:40px; display:block; z-index:2; } .sub3_3_service li:nth-child(1) { background: url(../images/sub/sub3/sub3_3_service01.jpg)center no-repeat; background-size:cover; } .sub3_3_service li:nth-child(2) { background: url(../images/sub/sub3/sub3_3_service02.jpg)center no-repeat; background-size:cover; } .sub3_3_service li:nth-child(3) { background: url(../images/sub/sub3/sub3_3_service03.jpg)center no-repeat; background-size:cover; } .sub3_3_service li:nth-child(4) { background: url(../images/sub/sub3/sub3_3_service04.jpg)center no-repeat; background-size:cover; } .sub3_3_service li:nth-child(5) { background: url(../images/sub/sub3/sub3_3_service05.jpg)center no-repeat; background-size:cover; } .sub3_3_service li:nth-child(6) { background: url(../images/sub/sub3/sub3_3_service06.jpg)center no-repeat; background-size:cover; } .sub3_3_service li:nth-child(7) { background: url(../images/sub/sub3/sub3_3_service07.jpg)center no-repeat; background-size:cover; } .not_service { border:2px solid #f6f8f3; padding:20px; border-radius:10px; margin-top:20px;} .not_service .sec_tit_1 { display:flex; align-items:center; gap:5px; } .not_service .sec_tit_1 span { width:24px; height:24px; display:inline-block; border-radius:50%; background:var(--green); color:#fff; line-height:28px; text-align:center; font-size:1.8rem; font-weight:300; } .service03_btns { margin-top:30px; display:flex; justify-content:center; gap:10px;} .service03_btns .buttonBig.arrow { justify-content:space-between; white-space:nowrap; gap:30px; } .service03_btns .buttonBig.arrow:hover { gap:30px; } .service_video_wrap { margin-top:3.0rem; width:100%; max-width:1024px; aspect-ratio:16/9; position:relative;} .service_video_wrap iframe { position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0;} .branchList.housekeep .listTable li:hover:before { border-color:var(--green); } .branchList.housekeep .listTable .branchName:before { background:url(../images/common/icon_location_green.png)center no-repeat; background-size: contain;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { .sub3_3_service { gap:10px; } .sub3_3_service li { width:calc(25% - 10px *3 / 4); } } @media all and (max-width: 768px) { .sub3_3_top { padding:30px 30px 0 30px; border-radius:24px 0 0 0; background:#f5f4f3; } .sub3_3_top:after { content:''; display:block; width:calc(100% + 60px); margin-left:-30px; margin-top:20px; aspect-ratio:550/240; background:url(../images/sub/sub3/sub3_3_img01.jpg)center right no-repeat; background-size:cover; } .sub3_3_service li { width:calc(33.3333% - 10px *2 / 3); } .sub3_3_service li span { line-height:30px; height:30px; } .not_service { padding:15px; } } @media all and (max-width: 480px) { .sub3_3_top { padding:20px 20px 0 20px; } .sub3_3_top:after { width:calc(100% + 40px); margin-left:-20px; } .sub3_3_top .sec_tit_big br { display:none; } .sub3_3_service li { width:calc(50% - 10px / 2); } .service03_btns { gap:3px; } .service03_btns .buttonBig.arrow {gap:10px; padding-left:10px; } .service03_btns .buttonBig.arrow:hover { gap:10px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 이용요금 > 정부지원 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .paymentTable th, .paymentTable td { white-space:nowrap; } .table_wrap + .scroll_text { display:none; } /* ================================== 반응형 ================================== */ @media all and (max-width: 768px) { .table_wrap + .scroll_text { display:block; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 마이페이지 > 서비스내역 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ /* 목록 테이블 */ .serviceList { border-top:2px solid var(--main); } .serviceList td {border-bottom:1px solid #efefef; padding:12px 15px ; text-align:center; font-size:1.5rem; color:var(--text-dkgrey); box-sizing:border-box;} .serviceList td a { color:var(--text-dkgrey); } .serviceList th { /*background:#f9f3f6;*/ font-weight:300; color:var(--text-ltgrey); text-align:center; padding:12px 15px; border-bottom:1px solid var(--main); font-size:1.5rem; text-align:center; } .serviceList tr:hover td { background:#f9f9f9; } .serviceList .viewBtns { display:flex; gap:2px; align-items:center;} .serviceList td.num { width:70px; } .serviceList td.title { text-align:left; } .serviceList td.view { width:160px; } /* 보기 */ .serviceVeiw { width:100%; max-width:700px; margin:0 auto; padding:20px; } .contract_view { width:100%; max-width:700px; margin:0 auto; padding:20px; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { /* 목록 테이블 */ .serviceList th, .serviceList td { font-size:1.4rem; } } @media all and (max-width: 768px) { /* 목록 테이블 */ .serviceList { border-top:0; } .serviceList thead { display:none; } .serviceList tr { display:flex; width:100%; border:1px solid #efefef; flex-wrap:wrap; gap:5px; padding:15px; } .serviceList tr + tr { margin-top:5px; } .serviceList td { border-bottom:0; padding:0; display:block; text-align:left;} .serviceList tr:hover td { background:#fff; } .serviceList td.num { display:none; } .serviceList td.title { width:100%; font-weight:500; color:var(--text-black); } .serviceList td.view { width:100%; } .serviceList td.serviceDay, .serviceList td.serviceTime { color:var(--text-ltgrey); } .serviceList td.serviceTime { padding-left:10px; } .serviceList td.serviceDay:before { content:'서비스 시작일: '; } .serviceList td.serviceTime:before { content:'기간: '; } .serviceList td.date:before { content:'상담접수일: '; } } @media all and (max-width: 480px) { /* 목록 테이블 */ .serviceList tr { padding:10px; } .serviceList td.title { white-space:initial; overflow:visible; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 관리사 이용약관, 관리사 윤리강령 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .ruleWrap { width:100%; padding:20px; height:auto; max-height:500px; overflow-y:auto; background:#fff; border:1px solid #efefef; } .ruleWrap .ruleTit { font-size:1.8rem; color:var(--text-black); margin-bottom:1.5rem; margin-top:5.0rem; font-weight:500; } .ruleList { counter-reset:list-counter; padding-left:0; } .ruleList > li { list-style:none; counter-increment:list-counter; position:relative; padding-left:30px; } .ruleList > li:before { content:"(" counter(list-counter) ")"; position:absolute; left:0; top:0; width:25px; } .ruleList > li + li { margin-top:7px;} /* ================================== 반응형 ================================== */ @media all and (max-width: 480px) { .ruleWrap { padding:15px; max-height:35vh; } .ruleWrap .ruleTit { font-size:1.6rem; margin-bottom:1.0rem; margin-top:4.0rem; } .ruleList > li { padding-left:22px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 계약서 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .contractView { width:100%; max-width:800px; margin:0 auto; padding:20px 10px; } .contractView > table { width:100% !important; } /* ================================== 반응형 ================================== */ @media all and (max-width: 480px) { .contractView > table th, .contractView > table th { font-size:14px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 만족도 설문 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .layerWrap { width:100%; max-width:960px; margin:0 auto; } .layerWrap .layerTit { background:var(--gra-main); text-align:center; padding:12px 10px 8px; color:#fff; border-radius:0 0 8px 8px; } .layerWrap .layerTit h2.title { font-size:2.0rem; font-weight:500; line-height:1.2; } .layerWrap .layerTit p { font-size:1.5rem; font-weight:300;} .layerWrap .layerCnts { padding:30px; } .layerWrap .layerCnts .sec_title { font-size:17px; font-weight:500; margin-bottom:10px;} .surveyList { margin-bottom:5.0rem;} .surveyList .surveyItem:not(:first-child) { margin-top:30px; } .surveyList .surveyItem .question { font-size:1.7rem; color:var(--text-black); margin-bottom:10px; line-height:1.4;} .surveyList .surveyItem .answer { padding-left:20px; } .surveyList .surveyItem .answer * { font-size:1.5rem; color:var(--text-grey); line-height:1.4; } .surveyList .surveyItem .answer label { cursor:pointer; } .surveyList .surveyItem .answer.radioType, .surveyList .surveyItem .answer.checkType { display:flex; flex-wrap:wrap; gap:8px; } .surveyList .surveyItem .answer.radioType label, .surveyList .surveyItem .answer.checkType label { width:100%; display:flex; gap:5px; align-items:flex-start; } .surveyList .surveyItem .answer.radioType label input { margin-top:2px;} .surveyList { counter-reset:question;} .surveyList .surveyItem { counter-increment:question;} .surveyList .surveyItem .question { display:flex; } .surveyList .surveyItem .question::before { content:counter(question) "."; width:20px; flex-shrink:0; } .surveyList .surveyItem .answer .textInput { border:1px solid #efefef; border-radius:5px; padding:8px 10px; width:100%; font-size:1.5rem; color:var(--text-black); height:120px; overflow-y:uto; } .surveyList .surveyItem .answer .txtAmount { display:block; text-align:right; font-size:1.3rem; color:var(--text-ltgrey); line-height:1; } #survey .confirmBtn { width:100%; max-width:360px; margin:0 auto; display:block; } /* ================================== 반응형 ================================== */ @media screen and (max-width: 768px) { .layerWrap .layerCnts .sec_title { font-size:15px;margin-bottom:10px;} } @media screen and (max-width: 480px) { .layerWrap .layerCnts { padding:20px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 개인정보수집동의서 + 이용계약서 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .formLayer { width:100%; max-width:800px; margin:0 auto; padding:30px; background:#fff; color:var(--text-dkgrey); } .formLayer .layerTit .title p { font-size:16px; font-weight:200;} .formLayer .layerTit .title { font-size:24px; text-align:center; line-height:1.2; margin-bottom:25px;} .formLayer .formCnts .formSec:not(:first-child) { margin-top:30px;} .formLayer .formCnts .formSec { font-size:14px; line-height:20px;} .formLayer .formCnts .formSec .sec_title { font-size:17px; font-weight:500; margin-bottom:10px;} .formLayer .formCnts .formSec .sign { flex-shrink:0; position:relative; text-align:left; align-content: center;} .formLayer .formCnts .formSec .sign .signImg { color:#a9a9a9; position:relative; display:block; width:100%; height:100%; } .formLayer .formCnts .formSec .sign .signImg div {height: 100%;align-content: center;} .formLayer .formCnts .formSec .sign .signImg img { position:absolute; top:50%; left:50%; height:38px; width:auto; translate: -50% -50%; max-width:initial; } .formLayer .formBrBox { border:2px solid #efefef; padding:26px 30px; } .formLayer .formBrBox.typeNb { border:0; padding:0; } .formLayer .formBottom { margin-top:30px; text-align:center; } .formLayer .formBottom .formDate { font-size:18px; margin-bottom:10px; letter-spacing:1px; display:flex; gap:15px; justify-content:center; align-items:center; } .formLayer .formBottom .formSignDiv { display:flex; justify-content:center; gap:20px; width:100%; max-width:360px; margin:0 auto; height:38px; align-items:center; font-size:16px; } .formLayer .formBottom .formSignDiv .tit { width:100px; flex-shrink:0; text-align:left; } .formLayer .formBottom .formSignDiv .sign { width:60px; height:38px; display:block; flex-shrink:0; position:relative; text-align:left; align-content: center;} .formLayer .formBottom .formSignDiv .sign .signImg { color:#a9a9a9; position:relative; display:block; width:100%; height:100%; } .formLayer .formBottom .formSignDiv .sign .signImg div {height: 100%;align-content: center;} .formLayer .formBottom .formSignDiv .sign .signImg img { position:absolute; top:50%; left:50%; height:38px; width:auto; translate: -50% -50%; max-width:initial; } .formLayer .formBottom .formSignDiv.provider { height:60px; } .formLayer .formBottom .formSignDiv.provider .sign .signImg img { height:60px !important; width:auto !important; max-width:initial; } .formLayer .formBottom .formSignDiv .name { flex-grow:1; text-align:right; font-size:16px; color:var(--text-black); } .printBtn { display:flex; justify-content:center; width:100%; max-width:1000px; margin:0 auto; padding:20px;} label input { vertical-align:middle;} /* 개인정보수집동의서 */ #privacyForm .privacy_last p + p { margin-top:10px;} #privacyForm .privacyAgree { text-align:center; margin-top:20px;} #privacyForm .privacyAgree .agreeText { margin-bottom:10px; font-size:16px;} #privacyForm .privacyAgree label { cursor:pointer; display:flex; align-items:center; gap:3px; } #privacyForm .privacyAgree label input[type="radio"] { margin-top:-2px; } #privacyForm .privacyAgree .agreeSelect { display:flex; justify-content:center; gap:20px; } /* 이용계약서 */ table.contractTable { position:relative; width:100%; } table.contractTable th, table.contractTable td { padding:7px 8px; line-height:1.1; border:1px solid #ccc; font-size:13px; min-height:30px !important; } table.contractTable th { font-weight:300; color:var(--text-black); background:#f9f9f9; } table.contractTable .th_title { font-weight:500; color:var(--text-black); background:#f9f9f9; font-size:14px; } table.contractTable td { font-weight:300; color:var(--text-black); background:#fff; } table.td-right td { text-align:right !important;} table .text-right { text-align:right !important; } table .text-center { text-align:center !important; } table .text-left { text-align:left !important; } .selmark { display:inline-block; position:relative; padding-left:16px; } .selmark:before { display:block; content:''; width:10px; height:10px; border:1px solid #ccc; position:absolute; left:0; top:50%; margin-top:-8px; background:transparent; } .selmark.selected:before { background:#333; border-color:#333; } .contractTable .sign { line-height:0;} .contractTable .sign img { height:32px; width:auto; } .contact_sheet3 img { width:100%; } #contractForm .contracTerm { border:1px solid #ccc; padding:10px; font-size:12px; line-height:15px; height:200px; overflow-y:auto; } #contractForm .contracTerm h4 { font-size:13px; font-weight:500; margin-bottom:5px;} #contractForm .contracTerm h4:not(.first) { margin-top:15px; } #contractForm .contracTerm ul > li { list-style:none;} #contractForm .contracTerm ul > li + li { margin-top:3px; } #contractForm .contracTerm ul .inList { padding-left:10px; } /* ================================== 반응형 ================================== */ @media screen and (max-width: 768px){ .formLayer { padding:20px; } .formLayer .layerTit .title { font-size:20px; } .formLayer .formCnts .formSec:not(:first-child) { margin-top:20px;} .formLayer .formCnts .formSec { font-size:13px; line-height:20px;} .formLayer .formCnts .formSec .sec_title { font-size:15px; margin-bottom:10px;} .formLayer .formBrBox { padding:24px 20px; } .formLayer .formBottom { margin-top:30px; } .formLayer .formBottom .formDate { font-size:16px; margin-bottom:15px; } .formLayer .formBottom .formSignDiv { font-size:13px; gap:10px; } .formLayer .formBottom .formSignDiv .tit { width:80px; } .formLayer .formBottom .formSignDiv .name { font-size:14px;} .formLayer .formBottom .formSignDiv .sign { width:50px; height:36px; } .formLayer .formBottom .formSignDiv .sign .signImg img {height:36px;} .formLayer .formBottom .formSignDiv.provider { height:56px; } .formLayer .formBottom .formSignDiv.provider .sign .signImg img { height:56px !important; } .tableWrap { width:100%; overflow-x:auto;} .tableWrap table { width:700px; min-width:100%; } /* 개인정보수집동의서 */ #privacyForm .privacyAgree { margin-top:20px;} #privacyForm .privacyAgree .agreeText { font-size:16px;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 영수증 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .receiptBox { border:1px solid #333; padding:30px; line-height:1.2; font-size:15px; } .receipt_cnts dl { display:flex; width:100%; gap:20px; align-items:flex-start; } .receipt_cnts dl dt {width:90px; flex-shrink:0; font-weight:500; position:relative; padding-left:10px; letter-spacing:-0.1em; } .receipt_cnts dl dt:before { width:4px; height:4px; content:''; background:#999; display:block; position:absolute; left:0; top:6px; } .receipt_cnts dl dt span { text-align:justify; width:100%; display:inline-block; } .receipt_cnts dl dt span::after { content: ""; display:inline-block; width:100%; height:0; line-height:0; } .receipt_cnts dl dd { flex-grow:1; } .receipt_cnts table.contractTable th, .receipt_cnts table.contractTable td { padding:8px; font-size:14px; line-height:1.2; } .receipt_cnts .serviceUser { display: flex; gap: 10px; } .receipt_cnts .serviceUser img { height:34px; vertical-align:top; margin-top:-5px; margin-left:10px; } .receipt_cnts .serviceUser .sign { flex-shrink:0; position:relative; text-align:left; align-content: center;} .receipt_cnts .serviceUser .sign .signImg { color:#a9a9a9; position:relative; display:block; width:100%; height:100%; } .receipt_cnts .serviceUser .sign .signImg div {height: 100%;align-content: center;} .receipt_cnts .serviceUser .sign .signImg img { position:absolute; top:50%; left:50%; height:38px; width:auto; translate: -50% -50%; max-width:initial; } .receipt_cnts .servicePrc { flex-wrap:wrap; gap:0px; } .receipt_cnts .servicePrc dd { width:100%; } .receiptText { text-align:center; margin-top:15px; } .receiptDate, .receiptBottom { display:flex; justify-content:center; gap:10px; align-items:center; margin-top:15px; } .receiptBottom .sealImg img { width:auto; height:60px !important; } .receiptForm .template { display:block; } .receiptForm #printContainer { display:none; } /* ================================== 반응형 ================================== */ @media screen and (max-width: 768px){ .receiptBox { padding:16px; font-size:14px; } .receipt_cnts dl { gap:15px; } } @media screen and (max-width: 480px){ .receipt_cnts dl { flex-wrap:wrap; gap:5px; } .receipt_cnts dl + dl { margin-top:10px; } .receipt_cnts dl dt { width:100%; } .receipt_cnts dl dt span { text-align:left; } .receipt_cnts dl dt span::after { display:none; } .receipt_cnts dl dd:not(.servicePrc) { width:100%; padding-left:10px; } .receiptTable thead {display:none; } .receiptTable td { display:flex; width:100%; justify-content:space-between;} .receiptTable td:nth-child(2):before {content:'서비스가격: '; color:#999; } .receiptTable td:nth-child(3):before {content:'정부지원금: '; color:#999; } .receiptTable td:nth-child(4):before {content:'본인부담금: '; color:#999; } .receiptTable td:nth-child(1) { display:block; text-align:center; font-weight:500; } .receiptTable td:not(:nth-child(1)) { border-top:0; } .receiptDate, .receiptBottom { gap:6px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 제공기록지 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ /* 목록 */ .serviceRecListWrap dl { display:flex; } .serviceRecListWrap dl:not(first-child) { margin-top:5px; } .serviceRecListWrap dl dt { padding-left:8px; position:relative; white-space: nowrap; } .serviceRecListWrap dl dt:before { content:''; width:4px; height:4px; display:block; background:#333; position:absolute; left:0; top:7px; } .serviceRecListWrap .serviceRecList { flex-wrap:wrap; margin-top:20px; } .serviceRecListWrap .serviceRecList dt { font-weight:500; } .serviceRecListWrap .serviceRecList dt, .serviceRecListWrap .serviceRecList dd { width:100%; } .serviceRecList .listTable { display:table; width:100%; border-top:2px solid var(--pink); font-size:14px; margin-bottom:10px; } .serviceRecList .listTable li { display:table-row; } .serviceRecList .listTable li div { display:table-cell; padding:10px; border-bottom:1px solid #ccc; background:#fff; } .serviceRecList .listTable li div.date { width:120px; border-right:1px solid #efefef;} .serviceRecList .listTable .signComplete { color:#999; } .serviceRecList .listTable .signComplete.complete { color:var(--text-pink); } /*작성*/ #serviceRceWrite .serviceDate input { height:4.0rem; line-height:4.0rem; width:100%; padding:0 15px; border:1px solid #efefef; } .recordWriteWrap .recordItem:not(:first-child) { margin-top:20px; } .recordWriteWrap { counter-reset:question; margin-top:30px; } .recordWriteWrap .recordItem { counter-increment:question;} .recordWriteWrap .recordItem .question { display:flex; color:var(--text-black); font-size:16px; margin-bottom:5px; align-items:center; } .recordWriteWrap .recordItem .question::before { content:counter(question); width:16px; height:16px; border:1px solid #a1a1a1; border-radius:50%; margin-right:4px; flex-shrink:0; line-height:19px; text-align:center; font-size:14px; } .recordWriteWrap .recordItem .answer { color:var(--text-grey); font-size:14px; padding-left:20px; background:#f4f5f7; padding:10px; display:flex; flex-wrap:wrap; } .recordWriteWrap .recordItem .answer label { white-space:nowrap; } .recordWriteWrap .recordItem .answer input[type="text"] { height:4.0rem; line-height:4.0rem; padding:0 15px; border:1px solid #efefef; } .recordWriteWrap .recordItem .answer input.inputSmall { max-width:100px; } .recordWriteWrap .recordItem .answer.selectType { gap:10px; flex-wrap:wrap; } .recordWriteWrap .recordItem .answer.selectType label { cursor:pointer; } .recordWriteWrap .recordItem .answer.selectType label input { display:inline-block; margin-right:3px; } .recordWriteWrap .recordItem .answer .w100 { width:100%; } .recordWriteWrap .recordItem .answer .flexInput { display:flex; align-items:center; white-space: nowrap; } .recordWriteWrap .recordItem .answer .flexInput strong { font-weight:300; } .recordWriteWrap .recordItem .answer .flexInput.gap5 { gap:5px; } .recordWriteWrap .recordItem .answer .flexInput.gap10 { gap:10px; } .recordWriteWrap .recordItem .answer .flexInput.gap20 { gap:20px; } .recordWriteWrap textarea { border:1px solid #efefef; height:150px; overflow-y:auto; } #serviceRceWrite .confirmBtn { width:100%; margin-top:3.0rem; } /* 이용자 제공기록지 */ .serviceRceForm .selectItemGroup { display:flex; flex-wrap:wrap; gap:3px; } .serviceRceForm .selectItemGroup .selectItem { width:100%; display:flex; gap:3px; } .serviceRceForm .selectItemGroup .selectItem:before { content:''; display:block; width:8px; height:8px; border:1px solid #999; background:#fff; } .serviceRceForm .selectItemGroup .selectItem.selected:before { border-color:#333; background:#333; } table.contractTable.serviceTable td { font-size:13px; color:var(--text-grey); word-break:break-all; } table.contractTable.serviceTable td small { font-size:12px; } .serviceRceForm .selectItemGroup.type01 { flex-wrap:nowrap; gap:5px; white-space: nowrap;} .serviceRceForm .selectItemGroup.type01 .selectItem { width:auto; font-size:14px; color:var(--text-black); } .serviceRceForm .formLayer .contractTable.serviceTable .sign { flex-shrink:0; position:relative; text-align:left; align-content: center; justify-self: center;} .serviceRceForm .formLayer .contractTable.serviceTable .sign .signImg { color:#a9a9a9; position:relative; display:block; width:100%; height:100%; } .serviceRceForm .formLayer .contractTable.serviceTable .sign .signImg div {height: 100%;align-content: center;} .serviceRceForm .formLayer .contractTable.serviceTable .sign .signImg img { position:absolute; top:50%; left:50%; height:38px; width:auto; translate: -50% -50%; max-width:initial; } /* ================================== 반응형 ================================== */ @media screen and (max-width: 768px) { .serviceRceForm .serviceInfoTable { border:1px solid #ccc; } .serviceRceForm .serviceInfoTable tr { display:flex; flex-wrap:wrap; } .serviceRceForm .serviceInfoTable tr th { width:30%; flex-shrink:0; border:0; border-bottom:1px solid #efefef;} .serviceRceForm .serviceInfoTable tr td { width:70%; flex-shrink:0; border:0; border-bottom:1px solid #efefef;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 예약접수지 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ #bookingReport .payTable {margin-bottom:10px; width:100%; } #bookingReport .payTable th, #bookingReport .payTable td { text-align:center; } #bookingReport .etcNoteTr > td { padding:0 !important; } #bookingReport .etcTable { width:100%; } #bookingReport .etcTable th, #bookingReport .etcTable td { text-align:center; border:0; border-right:1px solid#ccc; } #bookingReport .etcTable td:last-child { border-right:0; } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 서비스제공계획서 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ #servicePlan .provider { font-size:18px; color:var(--text-black); text-align:center; font-weight:500; } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// print css ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ @media print { body * { visibility: hidden; } .printPage, .printPage * { visibility: visible; font-family:'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif !important; font-weight:400; } .printPage { position: absolute; left: 0; top: 0; width: 210mm !important; max-width: 100% !important; margin: 0 auto !important; background: #fff; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .formLayer { page-break-before: always; padding:0; } .formLayer:first-child { page-break-before: auto; } .formLayer .layerTit .title, .formLayer .formCnts .formSec .sec_title { font-weight:700; } .printBtn { display: none !important; } .receiptForm .template { display:none !important; } .receiptForm #printContainer { display:block; } #contractForm .contracTerm { height:auto !important; padding:0; border:0; overflow-y:visible; font-size:10.5px; line-height:14px; } #contractForm .contracTerm h4 { font-size:12px; margin-top:10px !important; margin-bottom:5px !important; } .formLayer .formCnts .formSec .sec_title { font-size:16px !important; font-weight:500!important; } .formLayer .formBottom .formSignDiv { font-size:13px; gap:10px; } .formLayer .formBottom .formSignDiv .tit { width:80px; } .formLayer .formBottom .formSignDiv .name { font-size:14px;} .formLayer .formBottom .formSignDiv .sign { width:50px; height:36px; } .formLayer .formBottom .formSignDiv .sign .signImg img {height:36px;} .formLayer .formBottom .formSignDiv.provider { height:56px; } .formLayer .formBottom .formSignDiv.provider .sign .signImg img { height:56px !important; } .printPage th, .printPage td { border-color:#000 !important; } .printPage table, .printPage tr, .printPage td, .printPage th { page-break-inside: avoid !important; break-inside: avoid-page !important; } .printPage .formSec { page-break-inside: avoid !important; break-inside: avoid-page !important; } @page { size: A4; margin: 10mm; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 지점안내 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section07 .innerBox {padding:0;} .section07 .branchListWrap > div{max-width:100%;} /* ================================== 반응형 ================================== */ @media screen and (max-width: 1024px) { .section07{padding-top:0;} } @media screen and (max-width: 768px) { .branchBoard td.branch_address{display:none;} }