/* BASIC css start */ #contentWrap { width:1300px; margin:0 auto } .section{margin-bottom:100px} .sec_inner{width: 1300px; margin: 0 auto;} .section h2{text-align: center; font-size:32px; color:#000; font-weight:500; margin-bottom:55px;font-family: 'Noto Sans KR', sans-serif;} .swiper-button-disabled{opacity:.3} #sec1{overflow: hidden; margin-top: 50px;} #sec1 .sec1_cont{} #sec1 .sec1_cont .swiper{padding-bottom: 40px;} #sec1 .sec1_cont .swiper ul{ margin-left:calc((100% / 3) / 2);} #sec1 .sec1_cont .swiper ul li{width:600px;;padding: 0 25px;} #sec1 .sec1_cont .swiper ul li .ban_img{} #sec1 .sec1_cont .swiper ul li .ban_img a{display: block; width: 100%; height:640px; border-radius: 25px; overflow: hidden;} #sec1 .sec1_cont .swiper ul li .ban_img a img{width: 100%;} #sec1 .sec1_cont .swiper ul li .ban_txt{width: 100%; padding: 25px 0;} #sec1 .sec1_cont .swiper ul li .ban_txt p{text-align: center; font-family: 'Jost', 'Noto Sans KR', sans-serif; } #sec1 .sec1_cont .swiper ul li .ban_txt p.big{font-size: 28px; color: #000; font-weight: 500; margin-bottom: 10px;} #sec1 .sec1_cont .swiper ul li .ban_txt p.small{color: #999999;font-size: 17px; font-weight: 400;} #sec1 .swiper .swiper-pagination{bottom: 0;} #sec1 .swiper .swiper-pagination-bullet-active{background-color: #000;} #sec 7{ display:none; } #sec7 a{display: block; width: 100%;} #sec7 a img{width: 100%;} #sec3{} #sec3 .sec_inner{} #sec3 .sec_inner ul{display: flex; gap: 30px;} #sec3 .sec_inner ul li{flex-grow: 1; width: 50%;} #sec3 .sec_inner ul li a{display: block;width: 100%;border-radius: 12px; overflow: hidden;} #sec3 .sec_inner ul li a:hover>img{transform: scale(1.05);} #sec3 .sec_inner ul li a img{width: 100%; transition: transform .4s;} /*커뮤니티*/ #sec10 { margin-top: 1rem;} #sec10 ul { display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; } #sec10 ul li { width:24%; display:inline-block; } #sec10 ul li .ico { border-radius:1rem; overflow:hidden;} #sec10 ul li .ico img { width:100%; } #sec10 ul li p { text-align:center; color:#000; font-weight:400; font-size:18px; line-height:1.4; padding:10px 0; } /* 메인 배너 */ #mainSpot { position:relative; margin-bottom:110px; } #mainSpot .swiper>ul>li>a { display:block; width:100%; overflow:hidden; border-radius:25px; } #mainSpot .swiper>ul>li>a>img { width: 100%; } #mainSpot .swiper .btn_wrap { position: absolute; z-index: 4; bottom: 21px; left: 50%; transform: translateX(-50%); display: none; width:86px; } #mainSpot .swiper .btn_wrap .swiper-pagination { background-color: rgba(0,0,0,0.5); border-radius: 25px; width: 82px; height: 36px; color: #fff; position:static; margin-right:10px; font-size: 0; } .swiper-pagination .swiper-pagination-total, .swiper-pagination::before { opacity: 0.5; font-size:14px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .swiper-pagination .swiper-pagination-current { opacity: 1; font-size:14px; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); } .swiper-pagination .swiper-pagination-current::after { content: '/'; opacity: 0.5; /* '/' 기호의 투명도 */ margin: 0 7px; /* 위치 조정 필요 시 */ font-size: 14px; } #mainSpot .swiper .btn_wrap .control_btn { position:relative; } #mainSpot .swiper .btn_wrap .control { position:absolute; left:0; top:0; display:none; } #mainSpot .swiper .btn_wrap .control.on { display:block; } #mainSpot .swiper .btn_wrap .control a { cursor: pointer; display: flex; transition: all .1s; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: rgb(0 0 0 / 50%); } #mainSpot .swiper .btn_wrap .control a img { width:10px; } #mainSpot .swiper .btn_wrap .pause_btn.control a img { width:8px; } #mainSpot .swiper ul li.swiper-slide-active .txt_area p { transform: translateY(0px); opacity: 1; } #mainSpot .swiper ul li.swiper-slide-active .txt_area a.more { transform: translateY(0px); opacity: 1; } #mainSpot .swiper ul li .txt_area { overflow: visible; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left:0; padding-left:6%; max-width:95% } #mainSpot .swiper ul li .txt_area>* { transform: translateY(-25px); } #mainSpot .swiper ul li .txt_area p { opacity: 0; line-height: 1.3; } #mainSpot .swiper ul li .txt_area p.big { transition: all .6s; transition-delay: .1s; margin-bottom: 8px; } #mainSpot .swiper ul li .txt_area p.sub { font-weight: 500; transition: all .6s; margin-bottom: 17px; transition-delay: .37s; } #mainSpot .swiper ul li .txt_area a.more { opacity: 0; transition-delay: .6s; } #mainSpot .swiper-button-next {right: 2% !important;opacity: 0.8;} #mainSpot .swiper-button-prev {left: 2% !important;opacity: 0.8;} .sec2_cont .prdetc { color:var(--main-color) !important; font-weight:500; } #sec4 .swiper{/*padding-bottom:40px*/} #sec4 .swiper ul li{border:1px solid #eee; border-radius:10px; overflow:hidden} #sec4 .swiper ul li .thumb>a{border-radius:0; } #sec4 .swiper ul li .info{padding:30px; text-align:center;} #sec4 .swiper .swiper-pagination-progressbar{bottom: 0; top: unset; height:2px; background-color: rgba(0,0,0,.09);} #sec4 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #dc3737;} #sec5{ display:none; } #sec5 .sec_inner{} #sec5 .sec_inner h2{} #sec5 .sec_inner .sec5_cont{display: flex;gap: 25px; justify-content: space-between;} #sec5 .sec_inner .sec5_cont>div{width: 50%;} #sec5 .sec_inner .sec5_cont .banner_img{} #sec5 .sec_inner .sec5_cont .banner_img a{display: block;border-radius: 9px; overflow: hidden; width: 100%;} #sec5 .sec_inner .sec5_cont .banner_img a img{width: 100%;} #sec5 .sec_inner .sec5_cont .item_cont{} #sec5 .sec_inner .sec5_cont .item_cont ul{height: 100%; display: flex; flex-direction: column; justify-content: space-between;} #sec5 .sec_inner .sec5_cont .item_cont ul li{display: flex;height: 210px;} #sec5 .sec_inner .sec5_cont .item_cont ul li .thumb{width: 210px; height: 210px;} #sec5 .sec_inner .sec5_cont .item_cont ul li .thumb a{display: block; width: 100%; height: 100%;} #sec5 .sec_inner .sec5_cont .item_cont ul li .thumb a img{width: 100%; height: 100%; object-fit: cover;} #sec5 .sec_inner .sec5_cont .item_cont ul li .info{padding-left: 35px;display: flex; flex-direction: column; justify-content: center; flex-grow: 1; overflow-y: auto; height: 100%; max-width:427px;} #sec5 .sec_inner .sec5_cont .item_cont ul li .info .prdprice{border-top:none; margin-top:0} #sec5 .sec_inner .sec5_cont .item_cont ul li .info .prdprice .percent{display:none} /* sec6 */ #sec6{} #sec6 .sec_inner{} #sec6 .sec_inner h2{} #sec6 .sec_inner .sec6_cate{margin-bottom: 60px;} #sec6 .sec_inner .sec6_cate ul{display:flex; gap:25px; justify-content:center; } #sec6 .sec_inner .sec6_cate ul li{} #sec6 .sec_inner .sec6_cate ul li a{display:block; width:100%; text-align:center; font-family: 'Noto Sans KR', sans-serif; color:#9a9a9a; font-size: 16px; font-weight: 500; letter-spacing: -.3px;transition: color .1s, border-color .3s; border-bottom:2px solid transparent; display:block; padding-bottom:10px} #sec6 .sec_inner .sec6_cate ul li.on>a{ color: #dc3737; border-color:#dc3737} #sec6 .sec_inner .sec6_cate ul li a:hover{color: #dc3737; } #sec6 .sec6_prd{} #sec6 .sec6_prd>div .swiper{/*padding-bottom:100px*/} #sec6 .sec6_prd>div{display: none;} #sec6 .sec6_prd>div ul{} #sec6 .sec6_prd>div.show{display: block;} #sec6 .swiper .swiper-pagination-progressbar{bottom: 0; top: unset; height:3px; background-color: rgba(0,0,0,.09);} #sec6 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #333;} #sec8{ display:none; } #sec8 .sec_inner{} #sec8 .sec_inner h2{} #sec8 .sec_inner .sec8_cont{display: flex;justify-content: space-between;} #sec8 .sec_inner .sec8_cont>div{width: 415px;} #sec8 .sec_inner .sec8_cont>div>ul{width: 100%;display: flex; flex-direction: column; gap: 20px;} #sec8 .sec_inner .sec8_cont>div>ul>li{display: flex; width: 100%;} #sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child){height: 130px;} #sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .thumb{width: 130px; height: 130px;} #sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .info{flex-grow: 1;padding-left: 20px; display: flex; flex-direction: column; justify-content: center; max-width:285px} #sec8 .sec_inner .sec8_cont>div>ul>li .thumb a{height: 100%;} #sec8 .sec_inner .sec8_cont>div>ul>li .thumb a img{height: 100%; object-fit: cover;} #sec8 .sec_inner .sec8_cont>div>ul>li:first-child{} #sec8 .sec_inner .sec8_cont>div>ul>li:first-child .thumb{width: 100%; height: 415px;} #sec8 .sec_inner .sec8_cont>div>ul>li:first-child .info{display: none;} #sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice{border-top:none; margin-top:0} #sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice .percent{display:none} /* sec9 */ #sec9{padding:60px 0 50px; display:none; } #sec9 .sec_inner{position:relative;} #sec9 h2{} #sec9 .sec9_review{} #sec9 .sec9_review>div{width: 100%;} #sec9 .sec9_review>div>ul{width: 100%;} #sec9 .sec9_review>div>ul>li{flex-grow:1} #sec9 .li_review .rv_main{ width: 100%; border-bottom: 1px solid #e4e4e4;} #sec9 .li_review .rv_main .thumb{width:100%;} #sec9 .li_review .rv_main .thumb a{display: block; width: 100%; height: 100%;} #sec9 .li_review .rv_main .thumb a img{width: 100%; height: 100%; object-fit: cover;} #sec9 .li_review .rv_main .rv_main_cont{width: 100%; padding: 20px 0; max-width:280px} #sec9 .li_review .rv_main .rv_main_cont .rv_info{margin-bottom: 7px;color:#000; font-size: 15px;font-weight: 500;} #sec9 .li_review .rv_main .rv_main_cont .rv_cont{font-size: 14px; font-family: 'Noto Sans KR', sans-serif; text-overflow: ellipsis; overflow: hidden; font-weight:400; color:#999999; line-height:1.7; } #sec9 .li_review .rv_mini{width: 100%; display: flex; align-items: center; justify-content: left; gap:15px;margin-top:20px } #sec9 .li_review .rv_mini ul { display:flex; flex-direction:column; gap:8px;} #sec9 .li_review .rv_mini ul li {font-family: 'Noto Sans KR', sans-serif;font-size: 13px; color: #000;} #sec9 .li_review .rv_mini ul li{display:flex; align-items:center} #sec9 .li_review .rv_mini ul li span {font-family: 'Jost', sans-serif;display:flex; align-items:center; color:#000; font-size:16px; font-weight: 500; } #sec9 .li_review .rv_mini ul li span img{display:inline-block; margin-right:8px;} #sec9 .swiper_btn_prev,#sec9 .swiper_btn_next{position: absolute;z-index: 2; cursor: pointer; top: 50%; transform: translateY(-50%);} #sec9 .swiper_btn_prev{left:-130px } #sec9 .swiper_btn_next{right:-130px} /*유튜브 홍보 영상*/ #section_youtube { display: flex; justify-content: center; width:100%; text-align:center; padding:30px 0 40px 0; background:#f8f8f8; } #section_youtube .st_04 { font-size:28px; font-weight:500; color:#000; } #section_youtube .you_btn { display:inline-block; position:relative; margin: 5px 5px 5px 15px; height:43px; line-height:43px; text-align:center; } #section_youtube .you_btn a { display:inline-block; } #section_youtube .you_btn a img { height: 32px; } .play { position:relative; width:100%; height: 542px; margin:0 auto; display:flex; justify-content: center; } .play .chapter { font-family: 'EliceDigitalBaeum-Bd'; font-size:30px; color:#ccc; } .play .play_all { margin: 7px 0; float:left; } .play .play_all iframe { width: 950px; height: 535px; } .play .play_list { float:left; margin-left:10px; } .play .play_list span { font-family: 'LeferiBaseType-RegularA'; font-size:18px; } .play .play_list ul { display: flex; flex-direction: column; justify-content: flex-start; width:321px; height: 537px; overflow: hidden; text-align:center; margin-top:5px; } .play .play_list ul li { height: 181px; margin: 2px 0; } .play .play_list ul li iframe { width: 321px; height: 176px; } .play .play_list .video-stream, .play .play_list .html5-main-video { left: 0 !important; } /*아이품고 전문가 교육*/ #education_wrap { width:100%; position:relative; padding:10px 0; } #education_wrap .education { width:1280px; margin:0 auto; } #education_wrap .education li { position:relative; width:630px; height:230px; } #education_wrap .education li a { display: block; } #education_wrap .education li span { color:#e74174; } #education_wrap .education ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } #education_wrap .education ul li .tit { position:absolute; top:47px; left:32px; font-size:38px; line-height:50px; letter-spacing:-1px; text-align:left; } #education_wrap .education ul li .logo { position:absolute; top:169px; left:32px; } #education_wrap .education ul .name { position:absolute; top:67px; right:40px; font-size:24px; text-align:center; letter-spacing:-0.02em; } /* 01_이시형 박사 */ #education_wrap .education ul .edu_01 .sub { position:absolute; top:111px; right:38px; line-height:19px; color:#666; font-size:0.85em; text-align:center; letter-spacing:-0.02em; } #education_wrap .education ul .edu_01 .logo img { width:67px; } /* 02_신필향 명예 회장 */ #education_wrap .education ul .edu_02 .sub { position:absolute; top:111px; right:51px; line-height:19px; color:#666; font-size:0.85em; text-align:center; } /* 03_안관덕 셰프 */ #education_wrap .education ul .edu_03 .sub { position:absolute; top:111px; right:48px; line-height:19px; color:#666; font-size:0.85em; text-align:center; } #education_wrap .education ul .edu_03 .logo img { width:132px; } /* 04_김재용 원장 */ #education_wrap .education ul .edu_04 { background:url(/design/kichmom/10276/bn_edu_04_bg.jpg) no-repeat; } #education_wrap .education ul .edu_04 .sub { position:absolute; top:111px; right:54px; line-height:19px; color:#666; font-size:0.85em; text-align:center; } #education_wrap .education ul .edu_04 .logo img { width:167px; } /* 05_이용호 원장.22.07.19 추가 */ #education_wrap .education ul .edu_05 .sub { position:absolute; top:111px; right:61px; line-height:19px; color:#666; font-size:0.85em; text-align:center; letter-spacing:-0.02em; } #education_wrap .education ul .edu_05 .logo img { width:130px; } /* 06_박균섭 소장.22.07.20 추가 */ #education_wrap .education ul .edu_06 .sub { position:absolute; top:111px; right:61px; line-height:19px; color:#666; font-size:0.85em; text-align:center; letter-spacing:-0.02em; } #education_wrap .education ul .edu_06 .logo img { width:80px; } /* 07_박경숙 원장.24.01.04 추가 */ #education_wrap .education ul .edu_07 { background:url(/design/kichmom/10276/bn_edu_07_bg.jpg) no-repeat; } #education_wrap .education ul .edu_07 .sub { position:absolute; top:111px; right:46px; line-height:19px; color:#666; font-size:0.85em; text-align:center; } #education_wrap .education ul .edu_07 .logo img { width:167px; } #sec11{overflow: hidden; margin-top: 50px;} #sec11 .sec11_cont{} #sec11 .sec11_cont .swiper{padding-bottom: 40px;} #sec11 .sec11_cont .swiper ul{ margin-left:calc((100% / 3) / 2);} #sec11 .sec11_cont .swiper ul li{width:636px;;padding: 0 25px;} #sec11 .sec11_cont .swiper ul li .ban_img{} #sec11 .sec11_cont .swiper ul li .ban_img a{display: block; width: 100%; height:640px; border-radius: 25px; overflow: hidden;} #sec11 .sec11_cont .swiper ul li .ban_img a img{width: 100%;} #sec11 .sec11_cont .swiper ul li .ban_txt{width: 100%; padding: 25px 0;} #sec11 .sec11_cont .swiper ul li .ban_txt p{text-align: center; font-family: 'Jost', 'Noto Sans KR', sans-serif; } #sec11 .sec11_cont .swiper ul li .ban_txt p.big{font-size: 28px; color: #000; font-weight: 500; margin-bottom: 10px;} #sec11 .sec11_cont .swiper ul li .ban_txt p.small{color: #999999;font-size: 17px; font-weight: 400;} #sec11 .swiper .swiper-pagination{bottom: 0;} #sec11 .swiper .swiper-pagination-bullet-active{background-color: #000;} /*#education_wrap .education li a img { position:absolute; width:21px; top:6px; left:5px; }*/ #education_wrap #section_title_01 img { width:60px; margin:20px 0 5px 0; } #education_wrap .education .video { float:left; width:750px; height:350px; background:#d57473; } /*#education_wrap .education .text { float:left; width:450px; height:270px; padding:40px; background:#fff; }*/ #education_wrap .education .text .tit { font-size:32px; line-height:44px; font-weight:500; margin-bottom:10px; color:#000; } #education_wrap .education .text .sub { font-size:20px; margin-bottom:20px; } #education_wrap .education .text .sub .name { font-weight:500; padding-left:10px; } #education_wrap .education .text p { font-size:18px; line-height:28px; color:#666; } #education_wrap .education .text a { float:left; margin-top:15px; background:#fff; border:1px solid #ccc; padding:5px 15px; } #education_wrap .education .text a:hover { float:left; margin-top:15px; background:#d57473; color:#fff; border:1px solid #ccc; padding:5px 15px; } /* BASIC css end */