@charset "utf-8"; /************************************************************************* * @ 서비스명 : commonui * @ 파일명 : /css/commonui.css * @ 페이지설명 : commonui.css * @ 작성자 : 한주현 (pointweb) * @ 작성일 : 2021-12-24 ************************** 수정이력 ************************************** * 날짜 작업자 변경내용 * 2021-12-24 한주현 최초작성 **************************************************************************/ #main .main-slide{position: relative;} #main .main-slide .slick-slide a{display: block;padding-top:500px;} #main .main-slide .slick-slide.item01 a{background: url(/_public/images/main/visual01.png) 50% 50% no-repeat; background-size: cover;} #main .main-slide .slick-slide.item02 a{background: url(/_public/images/main/visual01.png) 50% 50% no-repeat; background-size: cover;} #main .main-slide .slick-slide.item03 a{background: url(/_public/images/main/visual01.png) 50% 50% no-repeat; background-size: cover;} #main .main-slide .slick-slide a img{display: block;width:100%;} #main .main-slide .slick-dots{position:absolute;width:100%;left:0;bottom:20px;text-align: center;} #main .main-slide .slick-dots li{display: inline-block;width:12px;height: 12px;border-radius: 100%;margin:0 5px;} #main .main-slide .slick-dots li button{display: block;width:100%;height: 100%;background: #fff;font-size:0;border-radius: 100%;} #main .main-slide .slick-dots li.slick-active button{background:#ec5d66;} #main .main-linkbox{margin-top:28px;} #main .main-linkbox .layout{display: flex;} #main .main-linkbox .layout a{position:relative;flex:1;display: inline-block;margin-left:40px;line-height: 80px;border-radius: 5px;font-size: 18px;color:#fff;padding:0 45px 0 80px;} #main .main-linkbox .layout a:before{content: "";position:absolute;top:19px;left:35px;display: inline-block;width:40px;height: 40px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;} #main .main-linkbox .layout a:after{content: "";position:absolute;top:29px;right:35px;display: inline-block;width:20px;height:20px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;background-position: -200px 0;} #main .main-linkbox .layout a:first-child{margin-left:0;} #main .main-linkbox .layout a:nth-child(1){background:#0ec096} #main .main-linkbox .layout a:nth-child(1):before{background-position: -120px -20px;} #main .main-linkbox .layout a:nth-child(1):hover {background:#11b18b;} #main .main-linkbox .layout a:nth-child(2){background:#3083ce;} #main .main-linkbox .layout a:nth-child(2):before{background-position: -160px -20px;} #main .main-linkbox .layout a:nth-child(2):hover {background:#2676be;} #main .main-linkbox .layout a:nth-child(3){background:#ff8f96;} #main .main-linkbox .layout a:nth-child(3):before{background-position: -200px -20px;} #main .main-linkbox .layout a:nth-child(3):hover {background:#fa8088;} #main .main-info{margin-top:58px;} #main .main-info .layout{display:flex;} #main .main-info .location{position:relative;width:33%;max-width: 400px;padding:14px 0;background: url(/_public/images/main/bg.png) 90% 0 no-repeat;background-size: 142px;} #main .main-info .location em{display: block;font-size:18px;color:#2b2b2b;font-weight: bold;} #main .main-info .location h3{position:relative;font-size:30px;color:#000;padding-bottom:15px;} #main .main-info .location h3:after{content: "";display: inline-block;width:50px;height: 5px;background: #ffd600;position: absolute;left:0;bottom:0;} #main .main-info .location p{margin-top:38px;font-size: 17px;color:#2b2b2b;} #main .main-info .location p span{display: block;font-size:15px;} #main .main-info .location .button-box{position:relative;margin-top:33px;font-size:0;padding-left: 60px;} #main .main-info .location .button-box i{position: absolute;left: -5px;top: -5px;display: inline-block;width:60px;height: 60px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;background-position: -240px -60px;} #main .main-info .location .button-box a{display: inline-block;line-height: 50px;width:120px;text-align: center;background: #202020;border-radius: 30px;font-size: 18px;color:#fff;} #main .main-info .health{margin-left:40px;width:49%;max-width:623px;border:1px solid #014d75; border-radius: 5px;overflow: hidden;} #main .main-info .health h3{line-height: 55px;padding:0 30px;color:#fff;font-size:19px;font-weight: 500;background: #014d75;} #main .main-info .health .list{padding:20px 30px;font-size:0;} #main .main-info .health .list a{position:relative;width:31.5%;display: inline-block;font-size: 16px;color:#202020;margin:10px 0;padding-left:10px;} #main .main-info .health .list a:nth-child(2n){} #main .main-info .health .list a:nth-child(3n){width:37%;} #main .main-info .health .list a:hover { color:#11b18b; } #main .main-info .health .list a:before{content: "";position:absolute;top:11px;left:0;display: inline-block;width:3px;height: 3px;border-radius: 100%;background: #11b18b;} #main .main-info .contactus{margin-left:19px;width:16%;max-width:197px;border:1px solid #11b18b; border-radius: 5px;overflow: hidden;} #main .main-info .contactus h3{line-height: 55px;padding:0 30px;color:#fff;font-size:19px;font-weight: 500;background: #11b18b;} #main .main-info .contactus a{display: block;} #main .main-info .contactus figure{text-align: center;margin-top:20px;} #main .main-info .contactus p{padding:0 30px;margin-top:10px;font-size: 20px;color:#4d4d4d;text-align: center;font-weight:bold;} #main .main-info .contactus p strong{display:block;font-size: 22px;color:#11b18b;} #main .main-board{margin-top:52px;background: #e1eaf5;padding:62px;} #main .main-board .layout{display: flex;} #main .main-board .main-notice{display: inline-block;width:32%;max-width: 400px;} #main .main-board .main-notice .title-group{display: flex;justify-content: space-between;align-items: center;} #main .main-board .main-notice .title-group h3{font-size:30px;color:#040404;} #main .main-board .main-notice .title-group a{position: relative;padding-right:45px;font-size:17px;color:#040404;font-weight:500;} #main .main-board .main-notice .title-group a:after{content: "";position:absolute;top:-7px;right:0;display: inline-block;width:40px;height: 40px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;background-position: 0 -240px;} #main .main-board .main-notice ul{margin-top: 36px;} #main .main-board .main-notice ul li{background: #fff;padding:26px 40px;} #main .main-board .main-notice ul li a{display: block;} #main .main-board .main-notice ul li a p{display:inline-block;font-size: 18px;color: #202020;font-weight: 500;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: calc(100% - 27px);} #main .main-board .main-notice ul li a i{display:inline-block;} #main .main-board .main-notice ul li .bottom{margin-top: 10px;font-size:0;} #main .main-board .main-notice ul li .bottom span{display: inline-block;font-size:16px;color:#787878;} #main .main-board .main-notice ul li .bottom span + span{margin-left:30px;} #main .main-board .main-notice ul li p em {color: #00468b; display: inline-block; font-size: 13px; margin-right: 4px;vertical-align: middle;} #main .main-board .main-notice ul li .bottom .cate.type1{color:#1464b2;} #main .main-board .main-notice ul li .bottom .cate.type2{color:#1464b2;} #main .main-board .main-notice ul li .bottom .date{position: relative;} #main .main-board .main-notice ul li .bottom .date:before{content: "";position:absolute;top:5px;left:-15px;display: inline-block;width:1px;height: 14px;background: #787878;} #main .main-board .main-notice ul li + li{margin-top:15px;} #main .main-board .main-news{display: inline-block;margin-left:70px;width:64%;max-width: 810px;} #main .main-board .main-news .title-group{display: flex;justify-content: space-between;align-items: center;} #main .main-board .main-news .title-group h3{font-size:30px;color:#040404;} #main .main-board .main-news .title-group a{position: relative;padding-right:45px;font-size:17px;color:#040404;font-weight:500;} #main .main-board .main-news .title-group a:after{content: "";position:absolute;top:-7px;right:0;display: inline-block;width:40px;height: 40px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;background-position: 0 -240px;} #main .main-board .main-news .card-slide{margin-top:36px;} #main .main-board .main-news .card-slide .slick-arrow{position: absolute;width:40px;height: 40px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;background-position: -40px -240px;font-size:0;z-index: 10;} #main .main-board .main-news .card-slide .slick-prev{top: -77px;left: 115px;} #main .main-board .main-news .card-slide .slick-next{top: -77px;left: 150px;transform: rotate(-180deg);} #main .main-board .main-news .card-slide .slick-slide{position: relative;margin:0 15px;} #main .main-board .main-news .card-slide .slick-slide a{display: block;} #main .main-board .main-news .card-slide .slick-slide figure{display: block;} #main .main-board .main-news .card-slide .slick-slide figure img{display: block;width:100%;} #main .main-board .main-news .card-slide .slick-slide .txt-box{position: absolute;left:0;bottom:0;background: rgba(0,0,0,0.6);padding:20px 30px;width:100%;} #main .main-board .main-news .card-slide .slick-slide .txt-box .tit{font-size:18px;color:#fff;font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} #main .main-board .main-news .card-slide .slick-slide .txt-box .date{margin-top:10px;font-size:16px;color:#ccc;} #main .main-board .main-news .card-slide .slick-dots{position: absolute;top: -70px;left: 200px;} #main .main-board .main-news .card-slide .slick-dots li{display: inline-block;width:10px;height: 10px;margin:0 5px;} #main .main-board .main-news .card-slide .slick-dots li button{display:block;width:100%;height: 100%;border-radius: 100%;background:#d6d6d6;font-size:0;} #main .main-board .main-news .card-slide .slick-dots li.slick-active button{background:#364b76;} #main .main-bottom{padding:60px 0 70px;} #main .main-bottom .main-tel{display: flex;} #main .main-bottom .main-tel .txt-box{position: relative;padding-left:50px;} #main .main-bottom .main-tel .txt-box:before{content: "";position:absolute;top:0;left:0;display: inline-block;width:40px;height: 40px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;background-position: -320px -20px;} #main .main-bottom .main-tel .txt-box h3{font-size: 28px;color:#040404;} #main .main-bottom .main-tel .txt-box h3 span{color:#0a45ac;} #main .main-bottom .main-tel .txt-box p{margin-top:23px;color:#787878;font-size:18px;font-weight:500;} #main .main-bottom .main-tel .list{display: flex;margin-left:170px;width: 55%;max-width: 700px;} #main .main-bottom .main-tel .list .box{flex:1;padding:28px 30px;margin-left:26px;border-radius: 10px;} #main .main-bottom .main-tel .list .box p{font-size:17px;color:#161616;font-weight:500;} #main .main-bottom .main-tel .list .box strong{position: relative;display: block;margin-top:10px;font-size:22px;padding-left:25px;} #main .main-bottom .main-tel .list .box strong:before{content: "";position:absolute;top:-5px;left:-7px;display: inline-block;width:40px;height:40px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;} #main .main-bottom .main-tel .list .box:first-child{margin-left:0;} #main .main-bottom .main-tel .list .box:nth-child(1){background: #e7f1fc;} #main .main-bottom .main-tel .list .box:nth-child(1) strong{color:#00a0f5;} #main .main-bottom .main-tel .list .box:nth-child(1) strong:before{background-position: -360px -20px;} #main .main-bottom .main-tel .list .box:nth-child(2){background: #ffe1e3;} #main .main-bottom .main-tel .list .box:nth-child(2) strong{color:#ec5d66;} #main .main-bottom .main-tel .list .box:nth-child(2) strong:before{background-position: -400px -20px;} #main .main-bottom .main-tel .list .box:nth-child(3){background: #e6f3f0;} #main .main-bottom .main-tel .list .box:nth-child(3) strong{color:#11b18b;} #main .main-bottom .main-tel .list .box:nth-child(3) strong:before{background-position: -440px -20px;} #main .main-bottom .covid19{margin-top:60px;} #main .main-bottom .covid19 a{display: block;} #main .main-bottom .covid19 a img{display: block;width:100%;} /* tablet */ @media all and (max-width:1024px) { #main .main-slide .slick-slide a{padding-top:78%;} #main .main-slide .slick-slide.item01 a{background: url(/_public/images/main/m_visual01.png) 50% 50% no-repeat; background-size: cover;} #main .main-slide .slick-slide.item02 a{background: url(/_public/images/main/m_visual01.png) 50% 50% no-repeat; background-size: cover;} #main .main-slide .slick-slide.item03 a{background: url(/_public/images/main/m_visual01.png) 50% 50% no-repeat; background-size: cover;} #main .main-linkbox .layout{display: block;padding:0 20px;} #main .main-linkbox .layout a{display: block;margin-left:0;margin-top:20px;} #main .main-linkbox .layout a:first-child{margin-top:0;} #main .main-info .layout{display: block;padding:0 20px;} #main .main-info .location{width:100%;max-width:100%;background: url(/_public/images/main/bg.png) 100% 0 no-repeat;} #main .main-info .health{margin-left:0;margin-top:30px;width:100%;max-width:100%;} #main .main-info .contactus{position:relative;margin-left:0;margin-top:20px;width:100%;max-width:100%;} #main .main-info .contactus a{padding: 47px 30px 47px 25%;position: relative;} #main .main-info .contactus figure{position: absolute;margin: 0;left: 30px;top:50%;transform:translateY(-50%);width:90px;} #main .main-info .contactus p{text-align: left;padding:0;margin:0;position:relative; padding: 0 20px 0 0 } #main .main-info .contactus p:after{content: "";display: inline-block;width:20px;height: 20px;background: url(/_public/images/@draft/sp_ico.png) no-repeat;background-size: 500px;background-position: -80px 0;transform: rotate(-180deg);position: absolute;top: 9px;right: 0;} #main .main-info .contactus p strong{display: inline-block;} #main .main-board{padding:57px 20px;} #main .main-board .layout{display: block;} #main .main-board .main-notice{display: block;width:100%;max-width:100%;} #main .main-board .main-news{margin-top:60px;margin-left:0;width:100%;max-width:100%;} #main .main-bottom{padding:60px 20px 70px;} #main .main-bottom .main-tel{display: block;} #main .main-bottom .main-tel .list{margin-left:0;margin-top:50px;display: block;width:100%;max-width:100%;} #main .main-bottom .main-tel .list .box{margin-top:20px;margin-left:0;display: flex;justify-content: space-between;align-items: center;} #main .main-bottom .main-tel .list .box:first-child{margin-top:0;} } /* mobile */ @media all and (max-width:640px) { #main .main-linkbox .layout a{margin-top:10px;line-height: 60px;padding: 0 20px 0 50px;font-size:16px;} #main .main-linkbox .layout a:before{top:11px;left:5px;} #main .main-linkbox .layout a:after{top: 20px;right: 10px;} #main .main-info{margin-top:30px;} #main .main-info .location{background: url(/_public/images/main/bg.png) 100% 0 no-repeat; background-size:30%;} #main .main-info .location p{font-size:15px;} #main .main-info .health .list{padding:10px;} #main .main-info .health .list a{vertical-align: top;width:50%;word-break:break-all;padding-lefT:20px;font-size:16px;} #main .main-info .health .list a:before{left:10px;} #main .main-info .health .list a:nth-child(3n){width:50%;} #main .main-info .contactus figure{width:60px;} #main .main-info .contactus a{padding: 30px 30px 30px 30%;} #main .main-board .main-notice .title-group h3{font-size:25px;} #main .main-board .main-notice ul li{padding:20px;} #main .main-bottom{padding:30px 20px 25px;} #main .main-board{padding:20px;} #main .main-board .main-news .title-group h3{font-size:25px;} #main .main-board .main-news .card-slide .slick-slide{margin:0 5px;} #main .main-board .main-news .card-slide .slick-slide .txt-box{padding:10px;} #main .main-board .main-news .card-slide .slick-slide .txt-box .tit{font-size:15px;} #main .main-board .main-news .card-slide .slick-slide .txt-box .date{margin-top:5px;font-size:13px;} #main .main-board .main-news .card-slide .slick-dots{top:inherit;width:100%;text-align:center;left:0;position: relative;margin-top: 20px;} #main .main-bottom .main-tel .txt-box h3{font-size:23px;word-break: keep-all;} #main .main-bottom .main-tel .txt-box p{margin-top:10px;font-size:16px;word-break: keep-all;} #main .main-bottom .main-tel .txt-box p br{display: none;} #main .main-bottom .main-tel .list .box{padding:20px;} #main .main-bottom .covid19{margin-top:30px;} #main .main-slide .slick-dots { bottom: 15px} }