@charset "utf-8"; /* CSS Document */ .dwrap{ overflow:hidden} .dwrap img{ position:relative; width:1980px; left:50%; margin-left:-990px; display:block; max-width:none} .box0{ width:92%; margin:0 auto; max-width:1680px} .box2{ width:1140px; margin-left:auto;} .box3{ width: 1520px; margin: 0 auto;} .box4{ width: 920px; margin: 0 auto;} .gnb li.m_hide{ display:none} .gnb .layer{ display:none !important;} /**/ #header{ position:relative; z-index:999;} #header .top_wrap, #header .h_menu_wrap, #header .gnb_wrap .gnb > li .dp1, .header_pd{ height:6em} .header_pt{ padding-top:6em;} #header{ background:#fff;} #header .logo img{ height:2.75em;} #header .h_menu_wrap{ gap:2.5vw;} #header .h_menu_wrap .hm_member{ gap:1.7vw;} #header .h_menu_wrap .hm_member > li a{ transition:.2s;} #header .h_menu_wrap .hm_member > li a:not(.flex){ display:block;} #header .h_menu_wrap .hm_member > li.def .in{ gap:.25em; padding:.25em 0; color:#555;} #header .h_menu_wrap .hm_member > li.def .in .xi{ font-size:1.125em;} #header .h_menu_wrap .hm_member > li.def .in .tt{ font-size:.938em;} #header .h_menu_wrap .hm_member > li.def .in .num{ min-width:2em; padding:.25em .375em; background:var(--siteC); border-radius:3em; text-align:center; font-size:.813em; font-weight:500; color:#fff; line-height:normal;} #header .h_menu_wrap .hm_member > li.def .in:hover{ color:var(--siteC);} #header .h_menu_wrap .hm_member .hm_btn{ gap:.5em; height:2.5em; padding:0 1.25em; background:var(--siteC); color:#fff; border-radius:.375em;} #header .h_menu_wrap .hm_member .hm_btn .xi{ font-size:1.250em;} #header .h_menu_wrap .hm_member .hm_btn .tt{ font-size:.875em; font-weight:500;} #header .h_menu_wrap .hm_member .hm_btn:hover{ background:#111;} #header .gnb_wrap{} #header .gnb_wrap .gnb{} #header .gnb_wrap .gnb > li{ position:relative;} #header .gnb_wrap .gnb > li .dp1{ padding:0 1.7vw;} #header .gnb_wrap .gnb > li .dp1 .tt{ font-size:1.125em; font-weight:500;} #header .gnb_wrap .gnb > li.more .dp1 .arrow{ padding-left:1em; font-size:1em;} #header .gnb_wrap .gnb > li.more .dp1 .arrow:before{ content:"\e941";} #header .gnb_wrap .gnb > li .dp2{ display:block; position:absolute; left:calc(50% - 1em); width:12em; margin-top:-.75em; padding:1.25em 1em; background:#fff; box-shadow:0 2px .75em rgba(0,0,0,.15); border-radius:.625em; opacity:0; visibility:hidden; transform:translateX(-50%); transition:opacity .2s;} #header .gnb_wrap .gnb > li .dp2 > li{} #header .gnb_wrap .gnb > li .dp2 > li > a{ padding:.625em .625em; color:#333;} #header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:.938em;} #header .gnb_wrap .gnb > li .dp3{ display:none;} #header .gnb_wrap .gnb > li.act .dp1{ color:var(--siteC);} #header .gnb_wrap .gnb > li.act .dp2{ opacity:1; visibility:visible;} #header .gnb_wrap .gnb > li .dp2 > li.act > a{ background:#f2f2f2;} /*quick*/ #quickMenu{ position:fixed; z-index:999999; top:0; bottom:0; left:0; width:50px; background:#fff; border-right:1px solid #28292b; box-shadow:1px 0 5px rgba(0,0,0,.3); padding-top:5em; box-sizing:border-box; transition:.25s;} .scroll #quickMenu{ padding-top:0;} #quickMenu.on{ width:150px;} #quickMenu.open{ width:150px;} #quickMenu .mo-side-btn {display: none;} #quickMenu .quick_con{ position:relative; height:100%; letter-spacing:-0.5px;} #quickMenu .btn_open{ background:var(--siteC3); color:#fff; text-align:center; cursor:pointer; height:3.125em; overflow:hidden; transition:.25s;} .scroll #quickMenu .btn_open{ height:4.375em;} #quickMenu .btn_open .tt{ width:0; overflow:hidden; font-size:.938em; font-weight:500;} #quickMenu.on .btn_open, #quickMenu.open .btn_open{ justify-content:flex-start; text-align:left; padding-left:1.25em;} #quickMenu.on .btn_open .tt, #quickMenu.open .btn_open .tt{ padding-left:.625em; width:auto;} #quickMenu .inner{ position:relative; height:90%;} #quickMenu .menu_wrap{ text-align:center; letter-spacing:-0.5px;} #quickMenu .menu_wrap > li{ white-space:nowrap} #quickMenu .menu_wrap > li > a{ display:block; height:3.125em; line-height:3.125em; border-bottom:1px solid #ddd; overflow:hidden;} #quickMenu .menu_wrap > li > a .tt{ opacity:0; font-size:.875em; width:0; overflow:hidden; transition:opacity .4s;} #quickMenu .menu_wrap > li > a:hover{ background:#f5f5f5;} #quickMenu.on .menu_wrap, #quickMenu.open .menu_wrap{ text-align:left;} #quickMenu.on .menu_wrap > li > a, #quickMenu.open .menu_wrap > li > a{ padding-left:1.25em;} #quickMenu.on .menu_wrap > li > a .tt, #quickMenu.open .menu_wrap > li > a .tt{ padding-left:.625em; opacity:1; width:auto;} #quickMenu .today_wrap{ padding-bottom:60px; text-align:center; letter-spacing:-0.5px;} #quickMenu .today_wrap .tit{ padding:15px 0;} #quickMenu .today_wrap .tit *{ transition:.3s;} #quickMenu .today_wrap .tit .tt{ display:block; margin-bottom:5px; font-size:.750em;} #quickMenu .today_wrap .tit .num{ display:inline-block; *display:inline; zoom:1; width:35px; height:35px; line-height:35px; background:var(--siteC); border-radius:50%; font-size:.938em; color:#fff; font-weight:500;} #quickMenu .today_wrap .today, #quickMenu .today_wrap .control_box{ width:90px; margin:0 auto; filter:alpha(opacity=0);opacity:0; transition:.3s;} #quickMenu .today_wrap .today .item{ padding:2px 0;} #quickMenu .today_wrap .today .item > a{ display:block; border:1px solid #ccc;} #quickMenu .today_wrap .today .item > a:hover{ border-color:#333;} #quickMenu .today_wrap .control_box{ margin-top:5px;} #quickMenu .today_wrap .control_box > li{ display:inline-block; *display:inline; zoom:1; vertical-align:top; width:45%; border:1px solid #ccc; line-height:25px; font-size:.688em; transition:.3s;} #quickMenu .today_wrap .control_box > li:hover{ background:#28292b; border-color:#28292b; color:#fff;} #quickMenu .today_wrap .control_box .prev, #quickMenu .today_wrap .control_box .next{ cursor:pointer;} #quickMenu.on .today_wrap .today, #quickMenu.on .today_wrap .control_box{ filter:alpha(opacity=100);opacity:1;} #quickMenu.open .today_wrap .today, #quickMenu.open .today_wrap .control_box{ filter:alpha(opacity=100);opacity:1;} /**/ #contents{ overflow: hidden;} #contents .sub_page_top{ position:relative;} #contents .sub_page_bg{ position:absolute; top:0; left:0; width:100%; height:100%;} #contents .sub_page_bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3); backdrop-filter:grayscale(.15);} #contents .sub_page_bg ~ *{ position:relative;} #contents .sub_page_tit{ height:24em; text-align:center; color:#fff;} #contents .sub_page_tit:not(:last-child){ padding-bottom:2.75em;} #contents .sub_page_tit .tt{ font-size:2.750em; font-weight:700;} #contents .sub_page_menu{ position:absolute; left:0; bottom:0; width:100%;} #contents .sub_page_menu .gnb{ display:block;} #contents .sub_page_menu .gnb .dp2{ padding:0 1px 0 0; align-items:flex-end; justify-content:center; text-align:center;} #contents .sub_page_menu .gnb .dp2 > li{ width:16em;} #contents .sub_page_menu .gnb .dp2 > li > a{ height:3.5em; margin:0 -1px 0 0; background:rgba(255,255,255,.8); color:#555; transition:.2s;} #contents .sub_page_menu .gnb .dp2 > li > a .tt{ font-weight:500;} #contents .sub_page_menu .gnb .dp2 > li.act > a{ background:rgba(255,255,255,.95); color:#000;} #contents .sub_page_menu .gnb .dp2 > li.on > a{ height:4em; background:#fff; color:var(--siteC); position:relative; z-index:10;} #contents .sub_page_menu .gnb .dp3{ display:none;} #contents .sub_page_con{ text-align:center;} #contents .sub_page_con .con_tit:before{ content:""; display:inline-block; width:1px; height:2.875em; margin:2.25em 0 1em; background:#333;} #contents .sub_page_con .con_tit .tt{ font-size:2.500em; font-weight:700; margin-bottom: 1.5em;} #contents .sub_page_top + .doc{ padding-top:3em;} #contents .sub_page_con + .doc{ /* padding-top:3.5em; */} #contents .doc{ padding:0 0 8em 0;} #contents .doc.mh{ min-height:calc(100vh - 5em); box-sizing:border-box;} .dp1on .gnb .dp2{ display:none!important} .dp2on .gnb > li, .dp2on .gnb > li .dp1{ display:none!important} .dp2on .gnb > li.on{ display:block!important} .dp3on .gnb > li, .dp3on .gnb > li .dp1, .dp3on .gnb > li .dp2 > li, .dp3on .gnb > li .dp2 > li > a{ display:none!important} .dp3on .gnb > li.on, .dp3on .gnb > li .dp2 > li.on{ display:block!important} /**/ .pc_hide{display:none;} .hotclassSlider_wrap{ position:relative;} .hotclassSlider_wrap .pd{ padding-left:6em;} .hotclassSlider{} .hotclassSlider .el{ padding:3em 0; overflow:hidden;} .hotclassSlider .el .back_img{ position:absolute; top:0; left:0; width:100%; height:100%;} .hotclassSlider .el .back_img .bg{ position:absolute; top:0; left:0; width:100%; height:100%;} .hotclassSlider .el .back_img:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); backdrop-filter:blur(1em) grayscale(.2);} .hotclassSlider .el .inner{ gap:2em 4em;} .hotclassSlider .el .tit_wrap{ flex:1; position:relative;} .hotclassSlider .el .tit_wrap .in{ flex:1; gap:1em; padding-bottom:3em; color:#fff;} .hotclassSlider .el .tit_wrap .t1{ font-size:1.063em; opacity:.6;} .hotclassSlider .el .tit_wrap .t2{ font-size:2.875em; font-weight:700;} .hotclassSlider .el .tit_wrap .t3{ display:inline-block; padding:.5em 1.375em; background:var(--siteC); border-radius:6em;} .hotclassSlider .el .tit_wrap .more_wrap{ margin-top:2em;} .hotclassSlider .el .tit_wrap .more{ padding:1em 1.5em; border:1px solid #fff; border-radius:.375em; text-transform:uppercase;} .hotclassSlider .el .tit_wrap .more .tt{ font-size:.875em;} .hotclassSlider .el .tit_wrap .more .xi{ font-size:1em; margin-left:2em} .hotclassSlider .el .tit_wrap .more:hover{ background:rgba(255,255,255,.2)} .hotclassSlider .el .img_wrap{ width:40%; position:relative;} .hotclassSlider .el .img_wrap .img{ border-radius:2em; box-shadow:0 0 1em rgba(0,0,0,.3); overflow:hidden;} .hotclassSlider_wrap .swiperBtn.prev{ left:3em;} .hotclassSlider_wrap .control{ position:absolute; z-index:2; left:0; bottom:2em; width:100%;} .recomSlider_wrap{ margin-bottom:3em; padding:4em 0; background:var(--siteBg1);} .recomSlider_wrap .inner{ position:relative;} .recomSlider_wrap .swiperBtn{ background:#fff; border-radius:50%; opacity:1; font-size:.813em;} .recomSlider_wrap .swiperBtn .xi{ font-size:2.25em;} .recomSlider_wrap .swiperBtn.prev{ left:-5em;} .recomSlider_wrap .swiperBtn.next{ right:-5em;} .recomSlider_wrap .swiperBtn:hover{ background:var(--siteC); color:#fff;} .recomSlider_wrap .swiperBtn.swiper-button-disabled{ display:none;} .recomSlider .el{ display:flex; height:auto;} .recomSlider .el .in{ box-shadow:none;} body.sub .visualSlider .el{ background-color:#666} body.sub .visualSlider .el .bg{ padding-bottom:35.9375%} body.sub .visualSlider .el .tit_wrap{ height:calc(100% - 3.5em); width:60%; color:#fff} body.sub .visualSlider .el .tit_wrap .t1{ font-size:.938em; opacity:.6; font-weight:500} body.sub .visualSlider .el .tit_wrap .t2{ font-size:2.25em; font-weight:700} body.sub .visualSlider .el .tit_wrap .t3{ font-size:1.063em; font-weight:500} body.sub .visualSlider .el .tit_wrap .more{ padding:.75em 1.5em; border:1px solid #fff; border-radius:3em; font-weight:700; margin-top:1em} body.sub .visualSlider .el .tit_wrap .more:hover{ background:rgba(255,255,255,.2)} body.sub .visualSlider .el .tit_wrap .more .xi{ font-size:1em; margin-left:2em} body.sub .visualSlider .el .img_wrap{ margin-left:auto; width:37%; transform:translate(0, 10%); border-radius:2em; box-shadow:0 0 1em rgba(0,0,0,.3); overflow:hidden; position:relative} body.sub .visualSlider .visualSlider-pagination{ bottom:2.5em} body.sub .img_layer{ position:absolute; right:2em; top:0; color:#fff; overflow:hidden; text-align:center} body.sub .img_layer .in{ background:var(--siteC); padding:.5em .5em .75em .5em; width:4em} body.sub .img_layer .xi{ display:block; font-size:1.5em} body.sub .img_layer .t1{ font-weight:700; font-size:.938em} body.sub .img_layer .svg{ padding-bottom:12.5%; margin-top:-1px} body.sub .img_layer .svg svg{ fill:var(--siteC); width:calc(100% + 1px)} body.main .visualSlider .el{ position:relative; overflow:hidden} body.main .visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.05); opacity:0; transition:2s;} body.main .visualSlider .el .bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.3;} body.main .visualSlider .el .resize{padding-bottom:50%} body.main .visualSlider .el.swiper-slide-active .bg, body.main .visualSlider .el.swiper-slide-duplicate-active .bg{ transform:scale(1) rotate(.001deg); opacity:1; transition:transform 2s} body.main .visualSlider_wrap{ position:relative} body.main .visualSlider_wrap .main_search{ position:absolute; left:50%; top:0; width:70%; height:calc(100% - 8em); z-index:9; transform:translateX(-50%); padding-bottom:3%; gap:4em; text-align:center; box-sizing:border-box;} .visualSlider_wrap .slogan{ gap:1em;} .visualSlider_wrap .slogan .tt{ color:#fff;} .visualSlider_wrap .slogan .t1{ font-size:1.500em; font-weight:700; text-transform:uppercase; opacity:.5;} .visualSlider_wrap .slogan .t2{ font-size:2.750em; font-weight:700;} .visualSlider_wrap .slogan .t3{ font-size:1.125em;} .visualSlider_wrap .main_search_wrap{ gap:1em; width:85%;} .visualSlider_wrap .main_search_wrap .inpst{ width:100%; height:3.875em; font-size:1.063em; color:#fff; border-radius:.5em; box-sizing:border-box;} .visualSlider_wrap .main_search_wrap .ms_link{ width:16em;} .visualSlider_wrap .main_search_wrap .ms_link .ms_f{ gap:.875em;} .visualSlider_wrap .main_search_wrap .ms_link .ms_f .tt{ font-weight:500;} .visualSlider_wrap .main_search_wrap .ms_link .ms_f .xi{ font-size:1.500em; transition:.2s;} .visualSlider_wrap .main_search_wrap .ms_link .ms_f:hover .xi{ transform:rotateY(180deg);} .visualSlider_wrap .main_search_wrap .ms_inner{ flex:1;} .visualSlider_wrap .main_search_wrap .ms_inner .inpst{ border-radius:0 0; border:solid var(--siteC4); border-width:1px;} .visualSlider_wrap .main_search_wrap .ms_inner > li{ margin-right:-1px;} .visualSlider_wrap .main_search_wrap .ms_inner > li:first-child .inpst{ border-radius:.5em 0 0 .5em;} .visualSlider_wrap .main_search_wrap .ms_inner > li:last-child .inpst { border-radius:0 .5em .5em 0;} .visualSlider_wrap .main_search_wrap .ms_inner > li:nth-child(1){ width:12.5em;} .visualSlider_wrap .main_search_wrap .ms_inner > li:nth-child(2){ width:12.5em;} .visualSlider_wrap .main_search_wrap .ms_inner > li:nth-child(3){ flex:1;} .visualSlider_wrap .main_search_wrap .ms_inner > li:nth-child(4){} .visualSlider_wrap .main_search_wrap .ms_f{ gap:1.25em;} .visualSlider_wrap .main_search_wrap .ms_f .xi{ font-size:1em;} .visualSlider_wrap .main_search_wrap .inpst.c1{ background:var(--crGrad1);} .visualSlider_wrap .main_search_wrap .inpst.c2{ background:var(--siteC4);} .visualSlider_wrap .main_search_wrap label, .visualSlider_wrap .main_search_wrap .inp{ background:rgba(0,0,0,.5);} .visualSlider_wrap .main_search_wrap label:after{ color:#fff;} .visualSlider_wrap .main_search_wrap select{ width:100%; height:100%; padding-left:1em; font-size:1em; border:none;} .visualSlider_wrap .main_search_wrap option{ color:#333;} .visualSlider_wrap .main_search_wrap .inp{ padding:1em; box-sizing:border-box;} .visualSlider_wrap .main_search_wrap .inp::placeholder{ color:#fff !important;} .visualSlider_wrap .main_search_wrap .ms_button .inpst{ width:4em; border:none; transition:.2s;} .visualSlider_wrap .main_search_wrap .ms_button .inpst:hover{ opacity:1; background:rgba(0,0,0,1);} .visualSlider_wrap .swiperPG{ position:absolute; z-index:10; left:0; bottom:10em; width:100%;} .main_con{} .main_con .main_quick_icon_wrap{ position:relative; z-index:10;} .main_con .main_quick_icon_wrap .inner{ padding:4em 0; background:#fff; border-radius:4em; margin-top:-8em;} .main_con .main_quick_icon_wrap .list{ padding:0 3%;} .main_con .main_quick_icon_wrap .list > li{ flex:1;} .main_con .main_quick_icon_wrap .list > li .in{ flex:1; gap:1em; padding:.25em 1em; border:dashed rgba(0,0,0,.2); border-width:0; text-align:center;} .main_con .main_quick_icon_wrap .list > li:not(:last-child) .in{ border-width:0 1px 0 0;} .main_con .main_quick_icon_wrap .list > li .in .ico img{ width:2.75em; transition:.2s;} .main_con .main_quick_icon_wrap .list > li .in .tt{ font-weight:500;} .main_con .main_quick_icon_wrap .list > li .in .s-tt {font-size: 0.875rem; color: #888; height: 3.125rem} .main_con .main_quick_icon_wrap .list > li .in .plus .xi{ font-size:1.750em; opacity:.1;} .main_con .main_quick_icon_wrap .list > li .in:hover{ color:var(--siteC);} .main_con .main_quick_icon_wrap .list > li .in:hover .ico img{ transform:rotateY(180deg);} .main_con .main_quick_icon_wrap .list > li .in:hover .plus .xi{ opacity:1;} /**/ .page_tit{ margin:0 0 1.25em 0} .main .page_tit{ margin: 0 0 3.5em 0;} .page_tit.c_white{ color: #fff;} .page_tit.m0{ margin-bottom:0;} .page_tit.m1{ margin-bottom:2em;} .page_tit .tt *{ vertical-align:baseline;} .page_tit .tt .info-tt {color: #888; font-size: 0.875rem; margin-top: 5px;} .page_tit .t1{ font-size: 1.915em; font-weight: 600; margin-bottom: 1em;} .page_tit .t2{ margin:.75em 0; color:#666; font-size:1.063em} .page_tit .t2:first-child{ margin-top:0;} .page_tit .t3{ font-weight:700; font-size:2.15em} .page_tit .t4{ font-weight:700; font-size:2.5em} .page_tit .t5{ font-weight:600; font-size:1.188em; text-transform: uppercase;} .page_tit .t6{ font-weight:500; font-size:.938em;} .page_tit .t7{ font-weight:500; font-size:1.063em;} .page_tit .t8{ font-weight:500; font-size:1.188em; color:#666;} .page_tit .xi{ font-weight:normal !important;} .page_tit .icon{ width:1.5em; line-height:1.5em; text-align:center; background:var(--siteC); color:#fff; font-size:1em; border-radius:50%} .page_tit .icon:before{ font-size:.75em} .page_tit .inLink{ display:flex; align-items:center; gap:.5em; line-height:normal;} .page_tit .inLink > .intt{ font-size:.875em;} .page_tit .inLink > .xi{ font-size:1em;} .page_tit .inLink:hover{ color:var(--siteC);} .page_tit .titIco1{ display:flex; align-content:center; align-items:center; gap:.625em; color:var(--siteC);} .page_tit .titIco1 .tt{ flex:1;} .page_tit .titIco1:before{ content:""; width:.5em; height:3px; background:var(--siteC);} .page_tit .txtIco1{margin-bottom: 1.5em;} .page_tit .txtIco1 .tt{ position:relative; padding-left:1rem; line-height:1.3;} .page_tit .txtIco1 .tt:before{ content:""; position:absolute; left:0; top:.563em; width:5px; height:5px; background:var(--siteC); border-radius:50%; transform:translateY(-50%);} .page_tit .txtIco1 + .txtIco1{ margin-top:.625em;} .page_tit .txtIco2{} .page_tit .txtIco2 .tt{ position:relative; padding-left:1.5em; line-height:1.4; font-size:.938em; color:#444;} .page_tit .txtIco2 .xi{ position:absolute; top:.125em; left:0; font-size:1.000em; color:#888; line-height:normal;} .page_tit .txtIco2 .xi:before{ font-size:1.250em;} .page_tit .txtIco2 + .txtIco2{ margin-top:.625em;} .page_line{ display:block; height:0; border-style:solid; border-width:0 0 1px 0; border-color:#ddd; margin:3em 0;} .page_line.m0{ margin:0 0;} .page_line.m1{ margin:2em 0;} .page_line:first-child{ margin-top:0;} .page_line:last-child{ margin-bottom:0;} .page_line.dot{ border-style:dashed;} .page_list{ display:flex; flex-direction:column; gap:.5em;} .page_list > li{} .page_list > li .in{line-height:1.5;} .page_list > li .in .tt{ font-size:.875em; color:#444;} .page_list.dot > li .in{ position:relative; padding-left:1em;} .page_list.dot > li .in:before{ content:""; position:absolute; left:0; top:.563em; width:5px; height:2px; background:var(--siteC); transform:translateY(-50%);} .page_box{ padding:1.5em 1.75em; background:var(--siteBg1);} .page_box.line{ border:2px solid #ddd; background:transparent;} .page_tab_wrap{} .page_tab_wrap:not(:first-child){ margin-top:1em;} .page_tab_wrap:not(:last-child){ margin-bottom:1em;} .page_tab_wrap .tab{ gap:.5em;} .page_tab_wrap .tab > li .in{ min-width:10em; height:3em; padding:.5em 1.25em; background:var(--siteBg1); border:1px solid #e5e5e5; border-radius:.375em; transition:.2s;} .page_tab_wrap .tab > li .in .tt{ font-size:.938em;} .page_tab_wrap .tab > li:hover .in{ border-color:var(--siteC); color:var(--siteC);} .page_tab_wrap .tab > li.on .in{ background:var(--siteC); border-color:var(--siteC); color:#fff;} /**/ .login_wrap{padding-top:4em;} .login_wrap .login{ width:32em; max-width:94%; margin:0 auto} .login_wrap .login .wrap_in{ margin:2em 0 0 0} .login_wrap .link_wrap{ padding:0 .5em; margin:1.5em 0 3em 0} .login_wrap .link_wrap .link{ font-size:.938em; margin:0 1em; color:#666;} .login_wrap .link_wrap .link .tt{ padding:0 .25em; display:inline-block} .login_wrap .link_wrap .link:hover .tt{ text-decoration:underline; color:var(--siteC)} .login_wrap .check_wrap{ font-size:.938em; margin:.5em 0 0 0} .login_wrap .btn_wrap{ display:flex; gap:.375em; margin-top:1em;} .login_wrap .btn_wrap .btn{ display:flex; align-items:center; justify-content:center; text-align:center; gap:.375em; padding:0 2em; height:3.5em; background:var(--siteC); color:#fff; border:none; width:100%; box-sizing:border-box; border:1px solid transparent; font-size:1.063em; font-weight:500; border-radius:.25em} .login_wrap .btn_wrap .btn.grow{ flex:1;} .login_wrap .btn_wrap .btn.c1{ border-color:#333; color:#333; background:#fff} .login_wrap .btn_wrap .btn.c2{ background:#fff; color:var(--siteC); border-color:var(--siteC)} .login_wrap .btn_wrap .btn.s1{ font-size:1.25em} .login_wrap .btn_wrap .btn.s2{ font-size:.875em} .login_wrap .btn_wrap .btn.w1{ flex:1;} .login_wrap .btn_wrap .btn:hover{ opacity:.8; transition:.3s} .login_wrap .sns_wrap.st {width:100%;} .login_wrap .sns_wrap{ padding:1em 0 0; border:solid #ddd; border-width:1px 0 0; margin-bottom:2em} .login_wrap .sns_wrap .t1{ text-align:center; font-size:.938em; font-weight:500; margin-bottom:1em} .login_wrap .sns_wrap .list{ gap:.5em;} .login_wrap .sns_wrap .list > li > a{ height:3em; padding:0 1em; text-align:center; position:relative} .login_wrap .sns_wrap .list > li > a .xi{ position:absolute; top:50%; left:1em; width:1.25em; font-size:1.375em; transform:translateY(-50%);} .login_wrap .sns_wrap .list > li > a .tt{ flex:1; font-size:.938em; font-weight:500;} .snsSt a.kaka{ background:#f9e000; color:#3b1f1e;} .snsSt a.kaka .xi:before{ content: '\ebee';} .snsSt a.nb{ background:#2bc622; color:#fff;} .snsSt a.nb .xi:before{content: '\ebf9';} .login_wrap .label_st:not(.cssbrowser) input ~ span, .login_wrap .label_st:not(.cssbrowser) input ~ .xi:before{} .login_wrap .label_st:not(.cssbrowser) input:checked ~ span, .login_wrap .label_st:not(.cssbrowser) input:checked ~ .xi:before{ color:var(--siteC)} .form_wrap{ border:1px solid #ddd; border-radius:1em; padding:3em} .form_wrap .tit_wrap{ float:left; width:20%} .form_wrap .tit_wrap .in{ border-top:2px solid #333; padding:1.125em} .form_wrap .con_wrap{ float:right; width:75%} .form_st{} .login_wrap .login.w1 .form_st{ width:46%} .form_st > li{ margin-top:1.875em} .form_st > li:first-child{ margin-top:0} .form_st > li .in{ position:relative; padding:0 1em 0 4em; margin-top:.5em} .form_st > li .in .icon{ position:absolute; left:0; top:50%; width:3em; line-height:3em; margin-top:-1.5em; text-align:center; color:#999} .form_st > li .in .icon:before{ font-size:1.313em} .form_st > li .in .lab{ position:absolute; left:4em; top:50%; line-height:1em; margin-top:-.5em; /*color:#fff; background:#fff;*/ padding:0 .25em} .form_st > li .in .inp{ width:100%; box-sizing:border-box; padding:1em 0; height:4em; border:none; position:relative; z-index:1; background:none; font-weight:600;} .form_st > li .in .inp[type=file]{ padding:0 !important; height:3em} .form_st > li .in textarea.inp{ height:10em; padding:1em !important} .form_st > li .in .line{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd; box-sizing:border-box; transition:.3s; border-radius:.25em} .form_st > li .in .inp:focus ~ .lab, .form_st > li .in .inp.on ~ .lab{ transform:scale(.9,.9); top:12px; color:var(--siteC); margin-left:-.5em; transition:.3s} .form_st > li .in .inp:focus ~ .icon, .form_st > li .in .inp.on ~ .icon{ color:var(--siteC)} .form_st > li .in .inp:focus ~ .line, .form_st > li .in .inp.on ~ .line{ border-color:var(--siteC)} .form_st > li .in .inp.c1{ background:#f1f1f1} .form_st.st1 > li{ display:flex; flex-wrap:wrap; align-items:center} .form_st.st1 > li.line{ margin-top:2em; padding-top:2em; border-top:1px solid var(--siteC)} .form_st.st1 > li.line > .label_st{ width:100%; margin-top:-1em} .form_st.st1 > li.line2{ border-top:1px solid #ddd; padding-top:1em !important} .form_st.st1 > li .in{ padding:0; flex:1 1 1%; min-width:0; word-break:break-all} .form_st.st1 > li .in_sec{ width:1.5em; text-align:center; color:#999; display:inline-block} .form_st.st1 > li .in_sec2{ width:.5em} .form_st.st1 > li .in_sec3{ width:3em; text-align:left; box-sizing:border-box; padding-left:.5em} .form_st.st1 > li .in_br{ flex-basis:100%} .form_st.st1 > li .in_tit{ font-weight:500; font-size:1.063em; width:100%} .form_st.st1 > li .in_tit .ess:before{ font-size:.875em; margin-left:.5em} .form_st.st1 > li .in_tit.c1{ color:#777} .form_st.st1 > li .in_tit.s1{ font-size:1.25em} .form_st > li .in_tt{ width:100%; color:#666; font-size:.938em; margin-top:1em; line-height:1.5} .form_st.st1 > li .in.fix{ flex:0 0 auto} .form_st.st1 > li .in .inp{ padding:1em 1em; height:3.5em; font-size:.938em; font-weight:500} .form_st.st1 > li .in .inp.s1{ font-size:1em} .form_st.st1 > li .in .btn{ min-width:6.5em; color:#fff;} .form_st.st1 > li .in .btn + .line{ background:#333; border-color:transparent} .form_st.st1 > li .in .btn.rechk + .line{ background:var(--siteC3);} .form_st.st1 > li .in .w100{ width:100%} .form_st.st1 > li .in.w1{ max-width:26%} .form_st.st1 > li .in.w50{ max-width:50%} .form_st.st1 > li .in.w100{ flex-basis:100%} .form_st.st1 > li .agree{ border:1px solid #ddd; width:100%; margin:1em 0} .form_st.st1 > li .agree > li{ padding:.75em 3em .75em 1em; position:relative; transition:.3s} .form_st.st1 > li .agree > li.all{ border-bottom:1px solid #ddd} .form_st.st1 > li .agree > li .more{ position:absolute; right:1em; top:50%; transform:translateY(-50%); background:#aaa; color:#fff; padding:.25em 1em; font-size:.875em} .mypageCTT .agree > li{ padding:.75em 3em .75em 1em; position:relative; transition:.3s; display: inline-block;} .mypageCTT .agree > li .more { position:absolute; right:-1em; top:50%; transform:translateY(-50%); background:#aaa; color:#fff; padding:.25em 1em; font-size:.875em} .form_st.st1 > li .agree > li .more:hover{ background:#666} .form_st.st1 > li .agree > li:hover{ background:#f5f5f5} .form_st.st1 > li .agree .label_st{ font-size:.938em} .form_st.st1 > li.flex{ padding:0 .5em} .form_st.st1 > li.flex .in_tit{ flex-basis:8em; font-size:.938em; padding-left:0; height:4em; display:flex; align-items:center} .form_st.st1 > li.flex .in{ margin-top:0} .form_st.st1 > li.flex .in.w100{ margin-left:8em} .form_st.st1 > li.flex .in .inp{ font-size:.938em} .form_st.text{ border-bottom:1px solid #ddd} .form_st.text > li{ border-top:1px solid #ddd; margin-top:0} .form_st.text > li .in .t1{ font-size:.938em; color:#666} .form_st.text > li .in a:hover{ text-decoration:underline} .form_st.line > li{} .form_st.line > li:not(.btn_wrap){ margin-top:0; padding:1.5em 0; border-bottom:1px solid #ddd;} .form_st.line > li .in{ margin-top:1.5em;} .cal_inwrapper{ display: flex; align-items: center; gap: 0em; width: 100%;} .cal_inwrapper .in_wrap{ display: flex; align-items: center;} .form_st.st1 > li .cal_inwrapper .in_wrap .in.fix{ flex: 1;} .fin_wrap{ border:1px solid #ddd; padding:2em 2em 3em 2em; text-align:center; box-sizing:border-box; margin:2em auto 0 auto} .fin_wrap .fin_tit{ font-weight:300; font-size:2em;} .fin_wrap .fin_tit:after{ content:""; display:block; margin:.75em auto; width:1em; height:1px; background:#aaa} .fin_wrap .fin_tt{ color:#888; line-height:1.6} .fin_wrap .fin_tt.t1{ color:#5c5e5e; font-size:1.188em; font-weight:500} .fin_wrap.st1{ border:none; padding:0} .msgWrap{ padding:1em; box-shadow:0 0 .5em rgba(0,0,0,.2); visibility:hidden; height:0; background:#fff; transform:translateY(2em); transition:.3s; position: absolute} .msgWrap .t1{ color:var(--siteC); font-size:.938em; line-height:1.25em; display:block; position:relative; padding-left:1.5em} .msgWrap .t1 .icon{ position:absolute; left:0; top:.063em} .msgWrap .t1 .icon:before{ content:"\e9a7"} .msgWrap.on{ visibility:visible; transform:translateY(0); height:100%; margin-bottom:2em; position:relative} .agree_box{ border:1px solid #ddd; box-shadow:1px 1px 1em rgba(0,0,0,.2); padding:2em} .agree_box.st1{ border:none; box-shadow:none; padding:0} .agree_box .tit{ font-size:1.188em; font-weight:500; color:#111; margin-bottom:1em; margin-top:2em} .agree_box .tit:first-child{ margin-top:0} .agree_box .con{ font-size:.938em; color:#666; line-height:1.6} .agree_box:not(.editer) .con *{ vertical-align:top} .agree_box .check{ border-top:1px solid #ddd; margin-top:1.5em; padding-top:1em} label_st.agree_box ul{ margin-top:1em} .agree_box h1{ font-weight:700; font-size:1.063em; margin-bottom:.5em} .agree_box h1:not(:first-child){ margin-top:2em} .agree_box ul > li{ line-height:1.4; text-indent:-1em; padding-left:1em; margin-bottom:.25em} .agree_box ul > li:before{ content:"- "; display:inline-block; width:1em; text-indent:0; text-align:center} .agree_box table{ margin:0 0 1em 0; width:100%} .agree_box table th, .agree_box table td{ border:1px solid #ddd; padding:1em; font-size:.938em} .agree_box table th{ background:#f5f5f5; font-weight:700; color:#333; font-size:1em; text-align:left} .agree_box p{ min-height:1em} .agree_box p strong{ font-size:1.125em; color:#333} .agree_box a{ vertical-align:top; color:#666; text-decoration:underline} .agree_box a:hover{ opacity:.6} .agree_box strong{ vertical-align:top; font-weight:500} .leveltest_wrap{ width:42em; max-width:94%; margin:0 auto;} .leveltest_wrap .wrap_in{ padding:3em 3em; background:#fff; border-radius:.625em; box-shadow:0 3px .625em rgba(0,0,0,.07); box-sizing:border-box;} .leveltest_wrap .level_inner{} .leveltest_wrap .level_step{ margin-bottom:2em; border-radius:1em; overflow:hidden;} .leveltest_wrap .level_step > li{ flex:1;} .leveltest_wrap .level_step > li .bar{ height:.5em; background:#ccc;} .leveltest_wrap .level_step > li.on .bar{ background:var(--siteC);} .leveltest_wrap .question_txt{ padding:1.5em 2em; border:1px solid #ccc;} .leveltest_wrap .question_txt .tt{ font-size:1.500em; word-break:break-all; word-wrap:break-word;} .leveltest_wrap .select_list{ display:flex; flex-direction:column; gap:1em; margin-top:2em;} .leveltest_wrap .select_list .label_st input:not(:checked) ~ span{ color:#000;} .leveltest_wrap .select_list .label_st:hover input ~ span{ color:var(--siteC); transition:.2s;} /**/ .page_cate_wrap{ padding:2em 0 4em 0; text-align:center;} .page_cate{ border:2px solid #eee; border-radius:1.25em; overflow:hidden;} .page_cate > li{ position:relative; display:flex; width:11em; min-width:14.2857%; border:solid #f1f1f1; border-width:0 1px 1px 0; margin:0 0 -1px 0; transition:.2s;} .page_cate > li:not(:nth-child(n+7)):last-child, .page_cate > li:nth-child(7n){ border-width:0 0 1px 0;} .page_cate > li:before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px; background:var(--siteC); border-radius:1.25em; opacity:0; transform:scaleY(0); transition:transform .3s; transform-origin:center bottom;} .page_cate > li > a{ position:relative; flex:1; padding:1.5em .5em;} .page_cate > li > a .icon{ height:100%; font-size:1.063em; font-weight:500;} .page_cate > li:hover{ color:var(--siteC); background:#f5f5f5;} .page_cate > li.on{ color:#fff;} .page_cate > li.on:before{ opacity:1; transform:scaleY(1);} body.sub .visualSlider.search{ padding-bottom:2em} body.sub .visualSlider.search .el .bg{ padding-bottom:25%} body.sub .visualSlider.search .el .tit_wrap{ height:100%} body.sub .visualSlider.search .visualSlider-pagination{ bottom:-1.5em} .page_search_wrap{ padding:0 0 3.5em 0;} .page_search{ display:flex; flex-direction:column; gap:1em;} .page_search .tit{ display:flex; align-items:center; gap:.5em; font-weight:600; font-size:1.250em} .page_search .tit .xi{ width:.5em; height:3px; background:var(--siteC);} .page_search .inner{ gap:1em 2em;} .page_search .form{ gap:.25em;} .page_search .sort_tit{ margin:0 .5em 0 2.5em; color:#666} .page_search .sort_tit:first-child{ margin-left:0} .page_search .tit + .form{ margin-left:2em} .page_search.st1{ border-radius:0; border-left:none; border-right:none; padding:1em 2em} .page_search.st2{ background:none; border:none; padding:1em} .page_sort:not(:first-child){ margin-top:2em;} .page_sort .sort_list > li:not(:last-child) .in:after{ content:""; width:1px; height:1em; background:#ddd; margin:0 1em;} .page_sort .sort_list .label_st input ~ .xi:before{ content:"\e92b" !important;} ul.page_prod{ margin:0 0 -2em -2em} ul.page_prod > li{ width:25%; display:flex;} ul.page_prod > li .in{ margin:0 0 2em 2em;} .page_prod .in{ flex:1; display:block; box-sizing:border-box; min-width:0; box-shadow:0 0 10px 2px rgba(0,0,0,.1); border-radius:.75em .75em; background:#fff; overflow:hidden; cursor:pointer; transition:.3s} .page_prod .in .img_wrap{ overflow:hidden} .page_prod .in .img_wrap .bgfix{background-size: contain;} /* .page_prod .in .img_wrap .bgfix.s1{padding-bottom: 57%;} */ .page_prod .in .img_wrap.date_end {position: relative;} .page_prod .in .img_wrap.date_end::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1;} .page_prod .in .img_wrap.date_end > span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.5em; font-weight: 500; color: #fff; z-index: 1;} .page_prod .in .con_wrap{ padding:1em 1em 2em; display:block; line-height:normal;} .page_prod .in .con_wrap .con_t1{ font-size:.813em; color:#666; margin:.5em 0; font-weight:400;} .page_prod .in .con_wrap .con_t2{ font-size:1.063em; font-weight:500; display:block; margin-bottom:1em;} .page_prod .in .con_wrap .con_t3{ font-size:.750em; color:#888; margin:.5em 0} .page_prod .in .con_wrap .con_t4{ font-size:.938em; color:#777; margin:.5em 0} .page_prod .in .con_wrap .con_t5{ font-size:1.125em; font-weight:500} .page_prod .in .con_wrap .con_t6{ font-size:1em; font-weight:500} .page_prod .in .con_wrap .trophy{ color:#ff9c00} .page_prod .in .con_wrap .span > *:not(.xi){ margin-right:.625em;} .page_prod .in .con_wrap .span > *.fwB{ font-weight:300;} .page_prod .in .con_wrap .span.line > *{ position:relative; padding-right:.75em} .page_prod .in .con_wrap .span.line > *:not(:last-child):before{ content:""; position:absolute; right:0; top:10%; height:80%; width:1px; background:#ddd} .page_prod .in .con_wrap .onoff .tt{ padding:.375em .75em; background:var(--siteC); color:#fff;} .page_prod .in .con_wrap .onoff .tt.bk {background: #333;} .page_prod .in .con_wrap .cate{ margin:.75em 0;} .page_prod .in .con_wrap .price{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em;} .page_prod .in .con_wrap .price .num{ font-weight:600;} .page_prod .in .con_wrap .price .per{ display:inline-flex; align-items:center;} .page_prod .in .con_wrap .price .per .xi{ font-size:1.125em;} .page_prod .in .btn_wrap{ margin-left:3em} .page_prod .in .btn_wrap.col > *{ margin:.25em 0} .page_prod .in:not(.hoverN):hover{ transform:translateY(-.5em)} .page_prod .in[onclick]{ cursor:pointer} .page_prod.d1{ margin:0 0 -3em -3em} .page_prod.d1 > li{ width:33.33%} .page_prod.d1 > li > .in{ margin:0 0 3em 3em} .page_prod.d2{ margin:0 0 -1.5em -1.5em} .page_prod.d2 > li{ width:20%} .page_prod.d2 > li > .in{ margin:0 0 1.5em 1.5em} .page_prod.d3{ margin:0 0 -1.5em -1em} .page_prod.d3 > li{ width:16.66%} .page_prod.d3 > li > .in{ margin:0 0 1.5em 1em} .page_prod.row{ margin:0; border-top:1px solid #666; margin-top:1em} .page_prod.row > li{ width:100%} .page_prod.row > li > .in{ display:flex; border-bottom:1px solid #ddd; padding:1.5em 0; position:relative; margin:0} .page_prod.row > li > .in .img_wrap{ width:20%} .page_prod.row > li > .in .img_wrap.w1{ width:10%} .page_prod.row > li > .in .con_wrap{ margin-left:2em} .page_prod.row > li > .in:hover{transform:translate(-.5em,0)} .teacher_sort_info_wrap{ padding:2em 0; margin-bottom:3em; background:var(--siteBg1);} .teacher_sort_info_wrap > .inner{ gap:1em 4em;} .teacher_sort_info_wrap .thumb_wrap{ width:10em;} .teacher_sort_info_wrap .thumb_wrap .thumb{ background:#fff; border:5px solid #fff; box-shadow:0 1px .75em rgba(0,0,0,.1); border-radius:50%; overflow:hidden;} .teacher_sort_info_wrap .info_wrap{ flex:1; gap:1em;} .teacher_sort_info_wrap .info_wrap .b{ font-weight:700; vertical-align:baseline;} .teacher_sort_info_wrap .teacher_name{ font-size:1.625em;} .teacher_sort_info_wrap .teacher_desc{ font-size:1.063em; color:#444; line-height:1.6;} .lecture_count{ display:flex; align-items:center; gap:.5em; margin-bottom:2em; font-size:1.063em;} .lecture_count .lecture_num{ font-size:1.250em; color:var(--siteC); font-weight:600;} /*상세페이지*/ .prod_detail_wrap{} .prod_co_wrap{} .prod_detail_wrap{background:#f1f3f4; broder-bottom:1px solid #eee; padding:60px 0 40px 0;} .bo1{width:95%; max-width:1200px; min-width:304px; margin:0 auto;} .prod_detail_wrap .inner .im_wrap{float:left; width:50%; margin-left:-100px; margin:0 auto;} .prod_detail_wrap .inner .inf_wrap{float:right; width:50%; padding-bottom:30px;} .prod_detail_wrap .inf_wrap .in{padding:0 0 0 150px;} .prod_detail_wrap .inf_wrap .prod_tit{margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed #ccc; letter-spacing:-0.5px; } .prod_detail_wrap .inf_wrap .prod_tit .span_t{display:block; font-size:1.563em;} .prod_detail_wrap .inf_wrap .prod_info .info{position:relative; padding:10px 0 10px 140px;} .prod_detail_wrap .inf_wrap .prod_info .info .info_t{position:absolute; top:10px; left:0; padding-left:10px;} .prod_detail_wrap .inf_wrap .prod_btn{margin-top:40px; font-size:0;} .prod_detail_wrap .inf_wrap .prod_btn > li{display:inline-block; zoom:1; vertical-align:top; margin-left:1%; font-size:1rem;} .prod_detail_wrap .inf_wrap .prod_btn > li.btn_li1, .prod_btn > li.btn_li0{width:34%;} .prod_detail_wrap .inf_wrap .prod_btn > li.btn_li2, .prod_btn > li.btn_li3{width:14%;} .prod_detail_wrap .inf_wrap .prod_btn .btn{width:100%; height:50px; border:1px solid transparent; border-radius:5px;} .prod_detail_wrap .inf_wrap .prod_btn .btn.c0{background:var(--siteC); color:#fff;} .prod_detail_wrap .inf_wrap .prod_btn .btn.c1{background:#28292b; color:#fff;} .prod_detail_wrap .inf_wrap .prod_btn .btn.c2{background:#28292b; color:#fff;} .prod_detail_wrap .inf_wrap .prod_btn .btn.c3{background:#fff; color:#fff; border:1px solid #aaa;} .prod_detail_wrap .inf_wrap .prod_btn .btn .xi{padding:0 5px;} .prod_detail_wrap .inf_wrap .prod_tit .span_t1{display:inline-block; zoom:1; margin:0 3px 10px 0; padding:4px 15px; background:#fff; border:1px solid #bbb; border-radius:25px; font-size:.875em;} .img-wrap{cursor:pointer;} .con_wrap{cursor:pointer;} .prod_detail_wrap .inf_wrap .prod_btn .btn .xi.xi-undo{color:#000;} /*copy*/ .prod_co_wrap{ padding:60px 0 200px;} .prod_co_wrap .inner{zoom:1;} .prod_co_wrap .inner .info_wrap{position:relative; width:70%;} /*.prod_co_wrap .inner .instructor_wrap {padding-left:4%; position:relative; box-sizing:border-box; height:auto; width:30%;}*/ .prod_co_wrap .inner .instructorW { width:30%;} .prod_co_wrap .instructor_wrap .in{/*position:sticky; top:0; max-height:100vh; overflow:auto; position: -webkit-sticky;*/} .prod_co_wrap .instructor_wrap .profile{ padding:35px 35px; border:1px solid #ccc; text-align:center; background:#fff; width:20em; margin-left:auto;} .prod_co_wrap .instructor_wrap .profile .photo{ max-width:150px; margin:0 auto;} .prod_co_wrap .instructor_wrap .profile .photo > span{ display:block;} .prod_co_wrap .instructor_wrap .profile .photo .img{ width:90%; height:90%; border:5px solid #fff; box-shadow:1px 1px 3px rgba(0,0,0,.3); border-radius:50%;} .prod_co_wrap .instructor_wrap .profile .name{ margin:20px 0;} .prod_co_wrap .instructor_wrap .profile .name > span{ position:relative; display:block; padding-bottom:15px; font-size:1.500em; color:#181a1d; font-weight:500; letter-spacing:-0.5px;} .prod_co_wrap .instructor_wrap .profile .name > span:after{ content:""; position:absolute; bottom:0; left:50%; margin-left:-10px; width:20px; height:2px; background:var(--siteC);} .prod_co_wrap .instructor_wrap .profile .cate{display:inline-block;} .prod_co_wrap .instructor_wrap .profile .cate .tt{ display:inline-block; *display:inline; zoom:1; vertical-align:top; padding:0 10px; line-height:25px; border:1px solid #ddd; border-radius:25px; font-size:.813em; color:#888; letter-spacing:-1px;} .prod_co_wrap .instructor_wrap .profile .btn_wrap{ margin-top:20px;} .prod_co_wrap .instructor_wrap .profile .btn_wrap .btn{ display:block; height:50px; line-height:50px; background:#fff; border:1px solid var(--siteC); border-radius:5px; color:var(--siteC); transition:.3s;} .prod_co_wrap .instructor_wrap .profile .btn_wrap .btn:hover{ background:var(--siteC); border-color:var(--siteC); color:#fff;} .prod_co_wrap .instructor_wrap .profile .conn_wrap{ margin-top:30px; padding:0 10px; text-align:left; letter-spacing:-0.5px;} .prod_co_wrap .instructor_wrap .profile .conn_wrap > dt{ margin-bottom:15px; font-size:1.125em; font-weight:500;} .prod_co_wrap .instructor_wrap .profile .conn_wrap > dd{ font-size:.938em; color:#555; line-height:1.4;} .prod_co_wrap .info_wrap{} .prod_co_wrap .view_tab_wrap{ text-align:center; overflow:hidden;} .prod_co_wrap .view_tab_wrap > li{ float:left; width:33.33%;} .prod_co_wrap .view_tab_wrap > li > a{ position:relative; display:block; margin-left:-1px; line-height:50px; background:#fafafa; border:1px solid #ddd; border-bottom-color:#28292b; font-size:.938em; color:#777; font-weight:500; letter-spacing:-0.5px;} .prod_co_wrap .view_tab_wrap > li:first-child > a{ margin-left:0;} .prod_co_wrap .view_tab_wrap > li.on > a{ z-index:101; background:#fff; border-color:#28292b; border-bottom-color:#fff; color:#28292b;} .prod_co_wrap .info_wrap .conn_wrap{ padding:40px 0 80px; line-height:1.5; text-align:center} .prod_co_wrap .info_wrap .review_wrap{ padding:40px 0 80px;} /****상세페이지 NEW*****/ .page_prod_view{ padding-top:3em;} .page_prod_view .view_layout{ gap:1.5em;} .page_prod_view .view_layout .view_cont{ flex:1;} .page_prod_view .view_layout .view_side{ width:26em;} .page_prod_view .view_section:not(:first-child){ margin-top:1.25em;} .page_prod_view .view_section .sec_inner{ padding:2em 2em;} .page_prod_view .view_round{ padding:2em 2em; background:#fff; border-radius:.625em; box-shadow:0 3px .625em rgba(0,0,0,.07); box-sizing:border-box;} .page_prod_view .view_round.p0{ padding:0 0;} .page_prod_view .view_sticky{ position:sticky; top:2em;} .page_prod_view .view_layout .view_cont .view_round{ overflow:hidden;} .page_prod_view .view_layout .view_side .side_inner{ max-height:calc(100vh - 4em);} .page_prod_view .detail_layout{ gap:2em 4em; margin-bottom:3em;} .page_prod_view .detail_layout > div{ flex:1;} .page_prod_view .detail_layout .detail_wrap{ padding:.5em 0;} .page_prod_view .thumb_img{ border-radius:.625em; overflow:hidden;} .page_prod_view .thumb_img img{ width:100%;} .page_prod_view .thumb_teacher{ background:#fff; border:5px solid #fff; box-shadow:0 1px .5em rgba(0,0,0,.2); border-radius:50%; overflow:hidden;} .page_prod_view .detail_wrap{ position:relative; padding-top:7em;} .page_prod_view .detail_wrap .thumb_teacher{ position:absolute; top: 15px;; left:1.5em; width:8em; height:8em; transform:translateY(-50%);} .page_prod_view .detail_wrap .prod_tit{ gap:1em; margin-bottom:2em;} .page_prod_view .detail_wrap .prod_tit .tt{} .page_prod_view .detail_wrap .prod_tit .t1{ font-size:.875em;} .page_prod_view .detail_wrap .prod_tit .t2{ font-size:1.625em; font-weight:500;} .page_prod_view .detail_wrap .prod_tit .cate{ gap:.375em;} .page_prod_view .detail_wrap .prod_tit .cate .in{ padding:.5em 1em; background:var(--siteC); border:1px solid var(--siteC); color:#fff; font-weight:500; line-height:normal;} .page_prod_view .detail_wrap .prod_tit .cate .in.re{ background:#fff; color:var(--siteC);} .page_prod_view .detail_wrap .prod_info{ gap:1.25em;} .page_prod_view .detail_wrap .prod_info .star_wrap{ margin-bottom:1em;} .page_prod_view .detail_wrap .prod_info .info{ gap:1em;} .page_prod_view .detail_wrap .prod_info .info .info_tt{ position:relative; width:9em; margin-bottom:auto; padding-left:.75em;} .page_prod_view .detail_wrap .prod_info .info .info_tt:before{ content:""; position:absolute; left:0; top:.5em; width:4px; height:4px; background:var(--siteC); border-radius:50%; transform:translateY(-50%);} .page_prod_view .detail_wrap .prod_info .info .info_tt .tt{ font-weight:600;} .page_prod_view .detail_wrap .prod_info .info .info_in{ flex:1; color:#555;} .page_prod_view.st2 .detail_wrap .prod_tit .t2{ font-size:1.375em;} .page_prod_view.st2 .detail_wrap .prod_info .info .info_tt{ width:6em;} .page_prod_view .view_class_wrap .table_wrap{ padding-top:0;} .page_prod_view .view_class_wrap .lecture_detail_opt{ margin-top:0;} .page_prod_view .cont_wrap{ line-height:1.5;} .page_prod_view .teacher_layout{ gap:2em 4em;} .page_prod_view .teacher_layout .inPhoto{ width:12em;} .page_prod_view .teacher_layout .inPhoto .thumb_teacher{ width:75%; margin:0 auto;} .page_prod_view .teacher_layout .inCon{ flex:1; gap:1.5em;} .page_prod_view .teacher_layout .inCon .name .tt{ font-size:1.375em; color:#000;} .page_prod_view .teacher_layout .inCon .name .b{ font-weight:700; vertical-align:baseline;} .page_prod_view .teacher_layout .inCon .cate{ gap:.375em;} .page_prod_view .teacher_layout .inCon .cate .in{ display:inline-flex; align-items:center; padding:.25em 1em; border:1px solid #e5e5e5; color:#555; line-height:normal;} .page_prod_view .teacher_layout .inCon .cate .in .tt{ font-size:.875em;} .page_prod_view .teacher_layout .inCon .intro{ line-height:1.6;} .page_prod_view .teacher_layout .view_level{ gap:1em 1.5em;} .page_prod_view .teacher_layout .view_level > li{ gap:.75em;} .page_prod_view .teacher_layout .view_level .tt{ font-size:.938em;} .page_prod_view .teacher_layout .view_level .level{ padding:.375em 1em; border-radius:.375em; font-size:.875em; font-weight:500;} .page_prod_view .teacher_layout .view_level .level.jp{ background:var(--siteBg1); color:var(--siteC);} .page_prod_view .teacher_layout .view_level .level.kr{ background:var(--siteBg2); color:var(--siteC4);} .page_prod_view .price_wrap{ gap:.75em;} .page_prod_view .price_wrap .info{ gap:1em;} .page_prod_view .price_wrap .info .info_tt{ flex:1;} .page_prod_view .price_wrap .info .info_tt .tt{ font-size:.938em; color:#555;} .page_prod_view .price_wrap .info .info_in{ color:#000;} .page_prod_view .price_wrap .info .price_ori{ text-decoration:line-through;} .page_prod_view .price_wrap .info .price{ font-size:1.375em; font-weight:600; color:var(--siteC);} .page_prod_view .view_btn{ gap:.375em;} .page_prod_view .view_btn > .w1{} .page_prod_view .view_btn > .w2{} .page_prod_view .view_btn > li:not(.fix){ width:100%;} .page_prod_view .view_btn .btn{ display:inline-flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; gap:.5em; width:100%; height:3em; padding:0 1em; border:1px solid transparent; border-radius:.375em;} .page_prod_view .view_btn .btn .xi{ font-size:1.250em;} .page_prod_view .view_btn .btn .tt{ font-weight:500;} .page_prod_view .view_btn .btn.c1{ background:var(--siteC); color:#fff;} .page_prod_view .view_btn .btn.c2{ background:#28292b; color:#fff;} .page_prod_view .view_btn .btn.c3{ background:#fff; border-color:#e1e1e1; color:#000;} .page_prod_view .view_btn .btn.c1.re{ background:#fff; border-color:var(--siteC); color:var(--siteC);} .page_prod_view .view_btn .btn.c2.re{ background:#fff; border-color:#28292b; color:#28292b;} .page_prod_view .view_btn .btn:hover{ background:#28292b !important; border-color:#28292b !important; color:#fff !important; transition:.2s;} /*****NEW end*****/ .f_score{ font-family:'score','notokr',sans-serif;} /*.dp1_mypageT .box1{max-width:95%;}*/ .intro_top{ position:relative; padding:4em 0 3em 0;} .intro_top:before{ content:""; position:absolute; top:0; left:0; width:100%; height:60%; background:var(--siteBg3);} .intro_top .intro_top_info{ position:relative; padding:2.5em 0 0 0; background:#fff; border-radius:3em 3em 0 0;} .intro_top .intro_top_info > div{ width:20%; gap:1em; padding:.25em .5em; text-align:center; cursor:pointer;} .intro_top .intro_top_info > div:not(:last-child){ border:dashed rgba(0,0,0,.15); border-width:0 1px 0 0;} .intro_top .intro_top_info > div .ico_wrap{ width:6em; height:6em; background:var(--siteBg1); border-radius:50%;} .intro_top .intro_top_info > div .ico_wrap img{ width:50%; transition:.3s;} .intro_top .intro_top_info > div .text_wrap{ gap:.5em; font-size:1.125em;} .intro_top .intro_top_info > div .text_wrap .tt{} .intro_top .intro_top_info > div .text_wrap .num_st{ font-size:1.25em; font-weight:600; color:var(--siteC);} .intro_top .intro_top_info > div:hover .ico_wrap{ background:var(--siteC2); transition:.2s;} .intro_top .intro_top_info > div:hover .ico_wrap img{ transform:rotateY(180deg)} .lm_wrap #mypageTLeft{position:absolute; top:3rem; border:; width:180px; border-radius:.675em; overflow:hidden; box-shadow:0 0 10px 2px rgba(0,0,0,.1);} .lm_wrap #mypageTLeft > .tt{ font-size:1.25em; font-weight:300; color:#fff; width:100%; height:80px; padding-left:16px; background:#3891ec; display:flex; align-items:center; box-sizing:border-box;} .lm_wrap #mypageTLeft .left_menu{padding:1rem 0; background:#f9f9f9;} .lm_wrap #mypageTLeft .left_menu li{height:46px; /*border-bottom:1px solid #ddd;*/ box-sizing:border-box;} .lm_wrap #mypageTLeft .left_menu li a{height:100%; display:flex; align-items:center;} .lm_wrap #mypageTLeft .left_menu li a .tt{padding-left:16px; position:relative; transition:.3s; color:#333;} .lm_wrap #mypageTLeft .left_menu li.on a .tt, .lm_wrap #mypageTLeft .left_menu li:hover a .tt{padding-left:30px;} .lm_wrap #mypageTLeft .left_menu li a .tt:before{content:''; display:block; width:0; height:2px; background:#3891ec; position:absolute; left:12px; top:50%; /*transform:translateY(-50%);*/ transition:.3s;} .lm_wrap #mypageTLeft .left_menu li.on a .tt:before, .lm_wrap #mypageTLeft .left_menu li:hover a .tt:before{width:10px;} .lm_wrap{ display:flex; align-items:flex-start; box-sizing:border-box; min-width:0; gap:3em 4em; padding:4em 0 0 0;} .lm_wrap > div{ box-sizing:border-box; min-width:0;} .lm_wrap .lm_sticky{ position:sticky; top:2em;} .lm_wrap .lm_sticky + .box2{ flex:1;} .lm_wrap .left_menu_wrap{ width:12.5em; border-radius:.75em; overflow:hidden;} .lm_wrap .left_menu_wrap .gnb, .lm_wrap .left_menu_wrap .gnb ul{ display:block;} .lm_wrap .left_menu_wrap .gnb > li .dp1.link{ display:flex !important; height:5em; padding:0 1em; background:var(--siteBg3); text-align:center; color:#fff;} .lm_wrap .left_menu_wrap .gnb > li .dp1 .in{ flex:1;} .lm_wrap .left_menu_wrap .gnb > li .dp1 .tt{ font-size:1.125em; font-weight:500; text-transform:uppercase;} .lm_wrap .left_menu_wrap .gnb .dp2{ padding:1em 0; background:var(--siteBg2);} .lm_wrap .left_menu_wrap .gnb .dp2 > li{ height:2.875em;} .lm_wrap .left_menu_wrap .gnb .dp2 > li > a{ height:100%; padding:0 1.5em; color:#333;} .lm_wrap .left_menu_wrap .gnb .dp2 > li > a .in{ flex:1; position:relative; transition:.3s;} .lm_wrap .left_menu_wrap .gnb .dp2 > li > a .in:before{ content:""; display:block; position:absolute; left:0; top:50%; margin-top:-1px; width:.5em; height:2px; background:var(--siteC); opacity:0; transform:scaleX(0); transition:transform .3s; transform-origin:left center;} .lm_wrap .left_menu_wrap .gnb .dp2 > li > a .tt{ font-size:.938em; font-weight:500;} .lm_wrap .left_menu_wrap .gnb .dp2 > li.act > a .in, .lm_wrap .left_menu_wrap .gnb .dp2 > li.on > a .in{ padding-left:1.125em;} .lm_wrap .left_menu_wrap .gnb .dp2 > li.act > a .in:before, .lm_wrap .left_menu_wrap .gnb .dp2 > li.on > a .in:before{ opacity:1; transform:scaleX(1);} .intro_top.admCr:before, .lm_wrap .left_menu_wrap .gnb > li.admCr .dp1{ background-color:#3a4789;} .fixWrap .fixIn .fixObj.scroll{position:fixed !important;} .fixWrap .fixIn .fixObj.left_menu_wrap.scroll{} .mypage_box{ padding-top:1em;} .mypage_box .title_wrap{position:relative; margin-bottom:1rem;} .mypage_box .title_wrap .mypageTT{ font-size:1.25em; color:#333; font-weight:500; position:relative; padding-left:26px; box-sizing:border-box;} .mypage_box .title_wrap .mypageTT:before{content:''; display:block; width:20px; height:20px; background:url('../images/inc/tt_sym.svg?v=0') no-repeat center/cover; position:absolute; left:0; top:50%; transform:translateY(-50%);} .mypage_box .title_wrap .mypageTT:after{content:''; display:none; width:100%; height:2px; background:#3891ec; position:absolute; left:0; bottom:-1rem;} .mypage_box .title_wrap .link_btn{display:flex; justify-content:center; align-items:center; /*border:1px solid #ddd;*/ box-sizing:border-box; /*height:40px; width:130px; border-radius:20px;*/ color:var(--siteC); font-size:.875rem; cursor:pointer; transition:.3s; /*font-weight:bold;*/} /*.mypage_box .title_wrap .link_btn:hover{border:1px solid #3891ec;}*/ .mypage_box .title_wrap .link_btn .icon_cv{width:20px; height:20px; background:var(--siteC); color:#fff; transition:.3s; display:flex; justify-content:center; align-items:center; border-radius:50%; margin-left:8px; padding-bottom:1px; box-sizing:border-box;} .mypage_box .title_wrap .link_btn i{font-size:1em;} .mypage_box .title_wrap .link_btn:hover .icon_cv{margin-left:16px;} .mypage_box .title_wrap .mypageTT.s1{ font-size:1.063em} .mypageCTT:not(:last-of-type){margin-bottom:3.5em;} .mypageCTT + .board_btn_wrap{ margin-top:0;} .mypageCTT .page_prod_view{ padding-top:1em;} .l_ing_wrap .page_prod > li{width:25%;} .l_ing_wrap .page_prod > li .img_wrap, .l_ing_wrap .page_prod > li .con_wrap{cursor:default;} .l_ing_wrap .page_prod > li:nth-of-type(-n+4) > .in{margin-top:0;} .l_ing_wrap .page_prod > li > .in .btn_wrap2{ gap:.375em;} .l_ing_wrap .page_prod > li > .in .btn_wrap2 .btn{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:.5em .25em; background:#f5f5f5; font-size:.875em; cursor:pointer; transition:.3s;} .l_ing_wrap .page_prod > li > .in .btn_wrap2 .btn.btn_student{} .l_ing_wrap .page_prod > li > .in .btn_wrap2 .btn:hover{color:var(--siteC);} .l_ing_wrap .page_prod > li > .in .btn_wrap2 .btn .xi{transition:.3s; margin-top:-2px;} .l_ing_wrap .page_prod > li > .in .btn_wrap2 .btn:hover .xi{margin-left:6px;} .l_end_wrap .page_prod > li{width:25%;} .l_end_wrap .page_prod > li .img_wrap, .l_end_wrap .page_prod > li .con_wrap{cursor:default;} .l_end_wrap .page_prod > li:nth-of-type(-n+5) > .in{margin-top:0;} .l_end_wrap .page_prod > li > .in .btn_wrap2{ gap:.375em;} .l_end_wrap .page_prod > li > .in .btn_wrap2 .btn{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:.5em .25em; background:#f5f5f5; font-size:.875em; cursor:pointer; transition:.3s;} .l_end_wrap .page_prod > li > .in .btn_wrap2 .btn.btn_student{} .l_end_wrap .page_prod > li > .in .btn_wrap2 .btn:hover{color:var(--siteC);} .l_end_wrap .page_prod > li > .in .btn_wrap2 .btn .xi{transition:.3s; margin-top:-2px;} .l_end_wrap .page_prod > li > .in .btn_wrap2 .btn:hover .xi{margin-left:6px;} .m_point_wrap .total_point{ font-size:1.125em; margin-top:-.25rem; color:#555;} .m_point_wrap .total_point .tt{} .m_point_wrap .total_point .num_st{font-size:1.25em; margin-bottom:-2px; margin-right:4px;} .w_account_btn{display:inline-flex; width:6.25em; height:2.5em; padding:0 1em; border-width:1px; border-style:solid; align-items:center; justify-content:center; border-radius:3em; box-sizing:border-box; font-size:.875em; line-height:normal;} .w_account_btn.st1{border-color:#5a5a5a; color:#333;} .w_account_btn.st2{border-color:var(--siteC); color:var(--siteC);} .w_account_btn.st3{border-color:var(--siteC4); color:var(--siteC4);} .mypageCTT .table_wrap{padding-top:.875rem;} .addLecture{border-top:1px solid #333; border-bottom:1px solid #333} .addLecture th, .addLecture td{padding:1em .5em;} .addLecture th{ font-weight:500;} .addLecture td{font-weight:400;} .addLecture tbody th{ text-align:left;} .addLecture.st2 th, .addLecture.st2 td{ padding:1em 1em;} .addLecture.st2 th{ background:#f8f8f8;} .attendance_btn_wrap{ gap:.875em 2em;} .ts_l{ width:10em;} .ts_r{ flex:1; min-width:0; overflow-x:scroll;} .ts_r.scrollst .board_st{ min-width:670px;} .parent_report_wrap{width:10%;} .parent_report_wrap table{border-left:1px solid #ccc;} .parent_report_wrap table .input_st{padding:.25em .75em; font-size:.9375em; border-radius:8px; height:2.25em; line-height:1.5em;} .ts_l table{border-right:1px solid #ccc;} .ts_r table th{height:1.25em; padding:.325em .5em; box-sizing:border-box;} .ts_r table td{width:50px; min-width:50px; max-width:50px;} .ts_no{width:5%;} .ts_name{width:10%;} .at{ font-size:1.250em; color:#999;} .at_ok{color:#3891ec; vertical-align:baseline;} .at_half{color:#f0990f; vertical-align:baseline;} .at_no{color:#ec3849; vertical-align:baseline;} .at_ok i, .at_half i, .at_no i{ line-height:normal;} .l_ing_wrap .lecture_info{} .l_ing_wrap .lecture_info i{font-size:1em; margin-top:-2px; color:#3891ec;} .at_btn{font-size:.938em; color:#555;} .at_btn .xi{ line-height:normal;} .at_btn .tt{ font-weight:500;} .at_btn.ok.on{color:#3891ec;} .at_btn.half.on{color:#f0990f;} .at_btn.no.on{color:#ec3849;} .at_btn.nono.on{color:#b05249;} .lecture_detail_opt{ border-bottom:1px solid #ddd; overflow:hidden;} table .lecture_detail_opt th, .lecture_detail_opt th, .lecture_detail_opt td{ text-align:center;} .lecture_detail_opt td.nolist {border-top: 1px solid #ddd;} .lecture_detail_opt th{padding:.75rem 1rem; background:#f8f8f8; border-top:2px solid var(--siteC3); border-left:1px solid #ddd; border-bottom:1px solid #ddd; font-size:.938em; font-weight:500;} .lecture_detail_opt th:first-of-type{border-left:none;} .lecture_detail_opt td{padding:.5rem 1rem; border-left:1px solid #ddd;} .lecture_detail_opt td:first-of-type{text-align:center; border-left:none;} .lecture_detail_opt .group_inp select.input_st{ padding-left:.5em; padding-right:.5em;} .lecture_detail_opt .s_tt{padding: .375em .75em;background: var(--siteC);color: #fff;font-size: 0.785em;} .filterG{filter:grayscale(90%);} .withdrawal_tit{margin-bottom:.5rem;} .withdrawal_tit i{font-size:1em; margin-top:-2px; color:#3891ec;} .writePhoto{} .writePhoto .write_img{} .writePhoto .write_img .inpFile{ width:0; height:0; overflow:hidden; opacity:0; z-index:-1; position:relative} .writePhoto .write_img .photoBtn{ background:#f5f5f5; color:#ccc; cursor:pointer; box-sizing:border-box; border:1px solid #ddd; border-radius:.25em; transition:.3s} .writePhoto .write_img .photoBtn .xi{ font-size:1.5em} .writePhoto .write_img .photoBtn .xi:before{content: '\ea4b';} .writePhoto .write_img .photoBtn .tt{ width:100%; text-align:center; margin-top:1em} .writePhoto .write_img .photoBtn:hover{ border-style:dashed; border-color:#666} .writePhoto .write_img .photoView{z-index:-1; opacity:0} .writePhoto .write_img .photoView.on{ z-index:1; box-shadow:0 0 .25em rgba(0,0,0,.3); background-color:#fff; border:1px solid #ddd; border-radius:.25em; opacity:1} .writePhoto .write_img .photoView .modify_wrap{ position:absolute; left:0; bottom:0; width:100%; height:100%; box-sizing:border-box; padding:.25em} .writePhoto .write_img .photoView .modify_wrap .btn{ box-sizing:content-box; width:2em; line-height:2em; text-align:center; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.8); color:#fff; border-radius:50%;} .writePhoto .write_img .photoView .modify_wrap .btn .xi:before{content: '\e96e';} .writePhoto .write_img .photoView .modify_wrap .btn:hover{ background:rgba(0,0,0,1);} .login.photo{ margin-top:8em; position:relative; padding:3em; box-sizing:border-box} .login.photo .writePhotoWrap{position:absolute; left:50%; top:-8em; transform:translateX(-50%)} .login.photo .writePhotoWrap + .wrap_in{ padding-top:2em} .login.photo.mg{ margin-top:5em; padding:0; margin-bottom:.625em} .login.photo.mg .writePhotoWrap + .wrap_in{ padding-top:7em} .writePhoto.st1{ font-size:1.5em} .writePhoto.st1 .write_img .resize{ padding-bottom:40%} .writePhoto .write_img .photoView.on{ box-shadow:none} .writePhoto.st2{ width:14em} .writePhoto.st2 .write_img .photoBtn, .writePhoto.st2 .write_img .photoView.on{ border-radius:.5em;} .writePhoto.st3{ width:10em;} .myapge_people{ gap:1.5em;} .myapge_people .exTxt{ font-size:.938em;} .myapge_people .resize {border-radius:.5em;} .myapge_people .writePhoto.st3 .resize{border-radius:50%;} .writePhoto.st3 .write_img .photoBtn{border-radius:50%;} .writePhoto.st3 .write_img .photoView.on{ border-radius:50%;} .prof_modi{} .prof_modi td, .prof_modi th{border-bottom:1px solid #ddd;} .prof_img_sample{cursor:pointer; position:relative;} .prof_img_sample .prof_img_sample_cv{width:100%; height:100%; background:rgba(0,0,0,.6); transition:.3s; opacity:0; position:absolute; left:0; top:0; display:flex; justify-content:center; align-items:center;} .prof_img_sample .prof_img_sample_cv i{font-size:2.313em; color:#fff;} .prof_img_sample:hover .prof_img_sample_cv{opacity:1;} .prof_img_sample .prof_img_sample_cv.selected{opacity:1;} .prof_img_sample .prof_img_sample_cv.selected i{color:#70caf3;} .prof_img_sample_line:nth-of-type(2n){flex-direction:row-reverse;} .order_step_wrap{ padding:1.5em 0; background:var(--siteBg1);} .order_step_wrap > .inner{ gap:1em 2em;} .order_step_wrap .order_step_tit{ flex:1;} .order_step_wrap .order_step_tit .tit{ display:flex; align-items:center; gap:1em;} .order_step_wrap .order_step_tit .tit .tt{ font-size:1.500em; font-weight:500;} .order_step_wrap .order_step_tit .tit .xi{ display:flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; width:2.25em; height:2.25em; background:var(--siteC3); border-radius:50%; font-size:1.188em; color:#fff; line-height:1;} .order_step_wrap .order_step, .order_step_wrap .order_step > li, .order_step_wrap .order_step > li .in{ display:flex; align-items:center; box-sizing:border-box;} .order_step_wrap .order_step > li .arrow{ order:-1; padding:0 1em; color:#aaa; font-size:1.500em} .order_step_wrap .order_step > li .in{ gap:.625em; color:#888} .order_step_wrap .order_step > li .in .xi{ font-size:1.125em;} .order_step_wrap .order_step > li .in .tt{} .order_step_wrap .order_step > li.on .in{ color:#000; font-weight:500;} .order_list{} .order_list .thumb_wrap{ width:16em; margin-right:2rem;} .order_list .thumb_wrap .thumb_img{ padding-bottom:66.66%; border-radius:.5em; overflow:hidden; border:1px solid #ddd;} .order_list .info_wrap{ flex:1; text-align:left;} .order_list .info_wrap .info_in{ gap:1em;} .order_list .info_wrap .info_in .info_l{ flex:1; gap:.5em;} .order_list .info_wrap .info_in .info_r{ gap:.25em;} .order_list .info_wrap .info_cate{ font-size:.938em;} .order_list .info_wrap .info_name{ font-size:1.063em; color:#000; font-weight:500;} .order_list .info_wrap .info_num{} .order_list .info_wrap .info_num > span{vertical-align:baseline;} .order_list .info_wrap .info_num .info_count{ margin-right:20px;} .order_list .info_wrap .info_num .info_price{} .order_list .info_wrap .info_num .info_price .txt_small{margin-left:6px;} .order_list .info_wrap .teacher_wrap{ gap:.75em; margin-top:1rem; padding-top:.5rem; border-top:1px solid #ddd;} .order_list .info_wrap .teacher_wrap .teacher_thumb{display:flex; width:40px; height:40px; border-radius:50%; border:1px solid #ddd; overflow:hidden;} .order_list .info_wrap .teacher_wrap .teacher_thumb .thumb_img{width:100%; height:100%; display:block; transition:.3s;} .order_list .info_wrap .teacher_wrap .teacher_name{ flex:1;} .order_list .info_wrap .link_lecture{ display:inline-flex; align-items:center; gap:.25em; padding:.5em .5em .5em .75em; background:var(--siteC3); font-size:.875em; color:#fff; line-height:normal; cursor:pointer; transition:.3s;} .order_list .info_wrap .link_lecture .xi{ line-height:1;} .order_list .info_wrap .link_lecture.c1{ background:#e8e8e8; color:#000;} .order_list .info_wrap .link_lecture:hover{ background:var(--siteC); color:#fff;} .order_list .input_row_btn{ padding:1em 0;} .input_row_btn{ gap:.25em;} .input_row_btn .input_st{ width:100%; padding:.5em .5em;} .input_row_btn.col .input_st{ width:90%;} .total_price{padding-right:20px;} .total_price *{ vertical-align:baseline;} .total_price .t_price{font-size:1.5em;} .txt_small{font-size:.875em; vertical-align:baseline;} .txt_red{color:#f21919; vertical-align:baseline;} .txt_gray{color:#555; vertical-align:baseline;} .t_price{font-size:1.25em; font-weight:500; color:var(--siteC); vertical-align:baseline;} .t_price.s1{ font-size:1.125em;} .t_price.noc{color:#111;} .t_price.red{color:#f21919;} .t_state{ font-weight:500;} .t_state.c1{ color:var(--siteC4);} .t_state.c2{ color:#888;} .t_state.c3{ color:var(--siteC3);} .order_table.st2{border-top:2px solid #000;} .order_table.st2 th, .order_table.st2 td{height:2.5em; padding:.75em .5em; border-bottom:1px solid #ddd;} .order_table.st2 tr:last-of-type th, .order_table.st2 tr:last-of-type td{border-bottom:1px solid #666;} .order_table.st2 th{ font-weight:500;} .order_table.st2 tbody th{ text-align:left;} .order_table tr .p1{ padding:1.5em .5em;} .order_fin{ max-width:720px; margin:0 auto; padding-top:30px;} .order_fin .fin_ment1{ font-size:2em; font-weight:500; color:#333; letter-spacing:-1px; text-align:center;} .order_fin .fin_ment2{ margin-top:30px; border:1px solid #ccc; border-top:2px solid #888; text-align:center; padding:30px 20px;} .order_fin .fin_ment2 .t1{ color:#444; line-height:1.5;} .order_num_info{ padding:1.25em 1.25em; background:var(--siteBg1);} .order_num_info > li .in{ gap:1em;} .order_num_info > li:not(:last-child) .in:after{ content:""; margin-right:1em; width:1px; height:1em; background:#ccc;} .order_num_info > li .in .no{ font-weight:600; color:var(--siteC);} .total_price_cal{margin-top:4px;} .comment_area{ margin-top:15px; border:1px solid #ddd;} .comment_area .inner{ padding:20px; background:#f5f5f5;} .comment_area .comment_tit{ margin-bottom:15px; overflow:hidden;} .comment_area .comment_tit .tit{ float:left;} .comment_area .comment_tit .num{ float:right;} .comment_area .comment_tit .tit > span{ padding-right:10px; color:#666; vertical-align:baseline;} .comment_area .comment_tit .tit .t1{ font-size:.938em; color:#000; font-weight:500;} .comment_area .comment_tit .tit .t2{ font-size:.813em;} .comment_area .comment_tit .num{ float:right; font-size:.813em; color:#222;} .comment_area .comment_tit .num .max{ color:var(--siteC);} .comment_area .comm_info{ margin-bottom:.75em;} .comment_area .comment{ position:relative; padding-right:120px} .comment_area .comment .comment_txt{ width:100%; height:80px; padding:10px 10px; font-size:.875em; background:#fff;} .comment_area .comment .comment_btn{ position:absolute; top:0; right:0; width:100px; height:100%; text-align:center; font-size:0.938em; color:#fff; background:var(--siteC); border-radius:3px; border:0;} .comment_area .comment_top{ padding:10px 20px 8px 20px; border-bottom:1px solid #ccc; overflow:hidden; background:#f8f8f8;} .comment_area .left_area{ float:left; text-align:left;} .comment_area .left_area > dt, .comment_area .left_area > dd{ display:inline-block; *display:inline; zoom:1; vertical-align:middle;} .comment_area .name{ font-size:.875em; color:#000;} .comment_area .date{ font-size:0.813em; color:#888; margin-left:10px;} .comment_area .comm_txt{ font-size:0.9em; color:#333; line-height:1.6;} .comment_area .comment_edit{ float:right; text-align:right;} .comment_area .comment_edit > a{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; font-size:0.750em; color:#333; border:1px solid #aaa; border-radius:3px; background:#fff; padding:0.3em 1em;} .comment_area .comment_bottom{ padding:18px 24px 18px 24px; overflow:hidden;} .comment_area .comment_bottom .re_comm{ margin-top:20px; padding:15px 15px 0 0; border-top:1px dashed #ccc;} .comment_area .comment_bottom .re_comm > dt, .comment_area .comment_bottom .re_comm > dd{ padding-left:30px;} .comment_area .comment_bottom .re_comm > dt{ margin-bottom:8px; position:relative;} .comment_area .comment_bottom .re_comm > dt:before{ content:"\e97e"; font-family:xeicon; font-size:1.625em; color:#aaa; position:absolute; top:-2px; left:0;} .comment_area .comment_bottom .re_comm .edit_btn{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; font-size:0.750em; color:#fff; background:#888; border:none; border-radius:3px; padding:0.3em 0.8em;} .star_ch{ margin-bottom:5px;} .star_ch li{ display:inline-block; color:#aaa;} .star_ch li.on{ color:#ff9d13;} .star_lv{} .star_lv i.xi{ font-size:.938em; color:#aaa;} .star_lv.on i.xi{ color:#ff9d13;} .star_ul{} .star_ul li i{ font-size:1.25em; color:#999;} .star_ul li.on i{ color:#ff9d13;} .star_wrap{ gap:.125em;} .star_wrap > .star{ font-size:1.250em;} .star_wrap > .star_num{ margin-left:.5em; font-weight:500;} .star_wrap.s1{ font-size:1.188em;} .comment_area .comment_bottom .star_ch li{ font-size:.813em;} .comm_wp{ margin-top:5em; border-top:1px solid #ddd; padding-top:2em;} .review_wrap_sm{} .review_wrap_sm .review_ctt{margin-bottom:3rem; position:relative; padding:0 1rem;} .review_wrap_sm .review_ctt:after{content:''; display:block; width:97%; height:1px; background:#c9c9c9; position:absolute; left:50%; bottom:-1.5rem; transform:translateX(-50%);} .review_wrap_sm .review_ctt:last-of-type{margin-bottom:0;} .review_wrap_sm .review_ctt:last-of-type:after{display:none;} .review_wrap_sm .review_user{} .review_wrap_sm .review_user .review_head{} .review_wrap_sm .review_user .review_head .r_head_thumb_wrap{width:46px; height:46px; border:1px solid #ddd; box-sizing:border-box; border-radius:50%; overflow:hidden; margin-right:10px;} .review_wrap_sm .review_user .review_head .r_head_thumb_wrap > .r_head_thumb{width:100%; height:100%;} .review_wrap_sm .review_user .review_head .r_head_info_wrap{} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_info_name{} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_info_name .t1{font-size:.9375em; color:#333;} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_star_date{} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_star_date .r_head_star{margin-right:14px; position:relative;} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_star_date .r_head_star:after{content:''; display:block; width:1px; height:60%; background:#999; position:absolute; right:-8px; top:50%; transform:translateY(-50%);} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_star_date .r_head_star .star_num{font-size:.9375em; margin-left:6px; color:#333;} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_star_date .r_head_date{} .review_wrap_sm .review_user .review_head .r_head_info_wrap .r_head_star_date .r_head_date .r_head_date_time{font-size:.9375em; color:#555;} .review_wrap_sm .review_user .review_body{margin-top:1.25rem;} .review_wrap_sm .review_user .review_body .review_text{font-size:.9375em; color:#111;} .review_wrap_sm .review_reply{padding:1.25rem; box-sizing:border-box; background:#f1f1f1; margin-top:1rem; border-radius:10px;} .review_wrap_sm .review_reply .review_head{} .review_wrap_sm .review_reply .review_head .review_seller{font-size:.875em; font-weight:bold;} .review_wrap_sm .review_reply .review_head .review_reply_date{font-size:.875em; margin-left:16px; color:#555; position:relative;} .review_wrap_sm .review_reply .review_head .review_reply_date:before{content:''; display:block; width:1px; height:60%; position:absolute; left:-8px; top:50%; transform:translateY(-50%); background:#777;} .review_wrap_sm .review_reply .review_body{padding-top:10px;} .review_wrap_sm .review_reply .review_body .review_text{font-size:.9375em;} .dp1_mypageS .prod_detail_wrap{background:none;} .dp1_mypageS .prod_detail_wrap .inf_wrap .in{padding-left:100px;} /*MAIN*/ .bg_gray{ background:var(--siteBg1);} .bg_gray2{ background:var(--siteBg2);} .bg_gray3{ background:var(--siteBg3);} .main_con_wrap{ padding:4.5em 0 5.5em; box-sizing:border-box;} .main_con_wrap .main_con_tit_wrap{ margin-bottom:2.5em; text-align:center; display:flex; flex-direction:column; align-items:center;} .main_con_wrap .main_con_tit_wrap .tt *{ vertical-align:baseline;} .main_con_wrap .main_con_tit_wrap .t1{ font-size:2.250em; font-weight:700; margin-bottom:.5em;} .main_con_wrap .main_con_tit_wrap .t2{ font-size:1.125em; margin-bottom:1.25em; opacity:.7;} .main_con_wrap .main_con_tit_wrap .link_btn{ padding:.75em 1.25em; font-size:.938em; font-weight:500; color:var(--siteC); display:flex; align-items:center; gap:.625em; border:1px solid var(--siteC); border-radius:.375em; cursor:pointer; transition:.2s;} .main_con_wrap .main_con_tit_wrap .link_btn .icon_cv{ transition:transform .3s;} .main_con_wrap .main_con_tit_wrap .link_btn .icon_cv .xi{ font-size:1em;} .main_con_wrap .main_con_tit_wrap .link_btn:hover .icon_cv{ transform:translateX(.375em);} .main_con_wrap .main_con_tit_wrap .link_btn:hover{ background:var(--siteC); color:#fff;} .main_con_wrap .main_con_tit_wrap.cw .tt{ color:#fff;} .main_con_wrap .main_con_tit_wrap.al{ align-items:flex-start;} .main_con_wrap .main_con_ctt_wrap{} .main_con_cate_list_wrap{ gap:1px; padding:0 0 4.5em 0;} .main_con_cate_list_wrap .main_con_cate{ position:relative; gap:.75em; width:12.5%; padding:1.5em .5em; background:var(--siteBg1); border-radius:0; color:#333; text-align:center; overflow:hidden; cursor:pointer;} .main_con_cate_list_wrap .main_con_cate:first-child{ border-radius:10em 0 0 10em;} .main_con_cate_list_wrap .main_con_cate:last-child{ border-radius:0 10em 10em 0;} .main_con_cate_list_wrap .main_con_cate:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; background:var(--siteC); opacity:0; transform:scaleY(0); transition:transform .3s; transform-origin:center bottom;} .main_con_cate_list_wrap .main_con_cate .text_wrap{ position:relative;} .main_con_cate_list_wrap .main_con_cate .text_wrap .tt{ font-size:1em; font-weight:500;} .main_con_cate_list_wrap .main_con_cate .icon_wrap{ position:relative; width:3.75em; height:3.75em; background:#fff; border-radius:50%; overflow:hidden; display:flex; justify-content:center; align-items:center; box-sizing:border-box; display:none;} .main_con_cate_list_wrap .main_con_cate .icon_wrap img{ width:50%; transition:.3s;} .main_con_cate_list_wrap .main_con_cate:hover .icon_wrap img{ transform:rotateY(180deg);} .main_con_cate_list_wrap .main_con_cate:hover{ color:var(--siteC);} .main_con_cate_list_wrap .main_con_cate.on{ color:#fff;} .main_con_cate_list_wrap .main_con_cate.on:before{ opacity:1; transform:scaleY(1);} .main_con_cate_list_wrap .main_con_cate.on .icon_wrap{ box-shadow:0 3px .625em rgba(0,0,0,.3);} .main_con4{ overflow:hidden;} .mainTeacherSlider{ overflow:visible !important;} .mainTeacherSlider .el .in{ gap:1.5em; text-align:center; color:#fff;} .mainTeacherSlider .el .in .img{ width:90%; border:5px solid rgba(255,255,255,.15); box-shadow:0 3px .875em rgba(0,0,0,.07); border-radius:50%; overflow:hidden;} .mainTeacherSlider .el .in .img .re{ transition:.3s;} .mainTeacherSlider .el .in .txt .tt{ margin-top:.5em; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:.2s;} .mainTeacherSlider .el .in .txt .t1{ font-size:1.250em; font-weight:500;} .mainTeacherSlider .el .in .txt .t2{ font-size:.938em; opacity:.7;} .mainTeacherSlider .el .in:hover .txt .t1{ color:var(--siteC2);} .mainTeacherSlider .el .in:hover .img .re{ transform:scale(1.05);} .mainTeacherSlider .swiper-wrapper{ transition-timing-function:linear;} .review_list{} .review_list > li{width:23%; margin-right:2.66%; transition:.3s; overflow:hidden; margin-bottom:2.66%;} .review_list > li:hover{transform:translateY(-10px);} .review_list > li:nth-of-type(4n){margin-right:0;} .review_list > li:nth-last-of-type(-n+4){margin-bottom:0;} .review_list > li .in{} .review_list > li .in .img_wrap{ border-radius:.625em; overflow:hidden; margin-bottom:1.25rem;} .review_list > li .in .con_wrap{} .review_list > li .in .con_wrap .con_t1{font-weight:500; margin-bottom:.5rem; word-wrap:break-word; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;} .review_list > li .in .con_wrap .con_t2{font-size:.875em; align-items:center; margin:1em 0;} .review_list > li .in .con_wrap .con_t2 .star_ul{} .review_list > li .in .con_wrap .con_t2 .star_ul li{} .review_list > li .in .con_wrap .con_t2 .star_num{ line-height:normal;} .review_list > li .in .con_wrap .con_t3{font-size:.938em; color:#333; line-height:1.4; white-space:normal; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:1em;} .review_list > li .in .con_wrap .user_prof_wrap{align-items:center;} .review_list > li .in .con_wrap .user_prof_wrap .thumb_wrap{width:30px; margin-right:10px; height:30px; border-radius:30px; overflow:hidden;} .review_list > li .in .con_wrap .user_prof_wrap .thumb_wrap .thumb{width:100%; height:100%;} .main_con3{} .main_link_list{ text-align:center;} .main_link_list > li{ width:16.66%; display:flex;} .main_link_list > li .in{ flex:1; gap:1.25em; padding:0 1em;} .main_link_list > li:not(:last-child) .in{ border:dashed rgba(0,0,0,.15); border-width:0 1px 0 0;} .main_link_list > li .in .ico{ width:7.5em; height:7.5em; background:#fff; border-radius:50%; transition:.2s;} .main_link_list > li .in .ico img{ width:40%;} .main_link_list > li .in .txt .tt{ font-size:1.125em; font-weight:500;} .main_link_list > li .in:hover .ico{ background:var(--siteC);} .main_con4 {} .logo_list { gap: 4em 2em; } .logo_list > li { flex: 0 0 calc(33% - 2em); } .logo_list > li .logo_wrap {} .logo_list > li .logo_wrap .imgfix { height: 100px; width: 350px; margin: 0 auto; } /**/ #footer{ border-top:1px solid #e5e5e5; background:#fff;} #footer .page_bottom_wrap{ padding:3em 0;} #footer .page_bottom_wrap .inner{ gap:2em 3em;} #footer .page_bottom_wrap .inner > div{ flex:1;} #footer .page_bottom_wrap .inner > div:not(:first-child){ padding-left:3em; border:solid var(--siteBg2); border-width:0 0 0 1px;} #footer .page_bottom_wrap .pb_tt{ font-size:1.125em; font-weight:700; margin-bottom:26px;} #footer .page_bottom_wrap .cs_box{ flex:0 1 25% !important; gap:.5em;} #footer .page_bottom_wrap .cs_box .cs_tel{ gap:.375em; font-size:1.375em; font-weight:600; color:#111; display:flex; align-items:center;} #footer .page_bottom_wrap .cs_box .cs_tel .xi{ font-size:1em;} #footer .page_bottom_wrap .cs_box .cs_time{ font-size:.813em; color:#555;} #footer .page_bottom_wrap .cs_box .link_btn_wrap{ margin-top:auto; padding-top:1em; gap:.5em;} #footer .page_bottom_wrap .cs_box .link_btn_wrap .link_btn{ display:flex; justify-content:center; align-items:center; height:3.25em; padding:0 1.25em; color:#333; background:#eee; border-radius:.375em; font-size:.875em; transition:.3s;} #footer .page_bottom_wrap .cs_box .link_btn_wrap .link_btn:hover{ background:var(--siteC); color:#fff;} #footer .page_bottom_wrap .notice_box{} #footer .page_bottom_wrap .notice_box .more{ margin-top:-.625em; transition:.3s;} #footer .page_bottom_wrap .notice_box .more .xi{ font-size:1.625em;} #footer .page_bottom_wrap .notice_box .more:hover{ color:var(--siteC); transform:rotate(90deg);} #footer .page_bottom_wrap .notice_box .main_notice_list{} #footer .page_bottom_wrap .notice_box .main_notice_list li{ gap:1em;} #footer .page_bottom_wrap .notice_box .main_notice_list li:not(:last-of-type){ margin-bottom:12px;} #footer .page_bottom_wrap .notice_box .main_notice_list li p{ color:#333;} #footer .page_bottom_wrap .notice_box .main_notice_list li p.notice_name{ flex:1; padding-left:8px; box-sizing:border-box; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:.875em; position:relative; cursor:pointer;} #footer .page_bottom_wrap .notice_box .main_notice_list li p.notice_name:before{ content:''; display:block; width:4px; height:1px; background:#111; position:absolute; left:0; top:50%; transform:translateY(-50%);} #footer .page_bottom_wrap .notice_box .main_notice_list li p.notice_date{ font-size:.75em; color:#888;} #footer .page_bottom_wrap .notice_box .main_notice_list li p.notice_name:hover{ text-decoration:underline;} #footer .page_bottom_wrap .quick_link_box .listW{ display:flex; gap:1em; align-items:flex-start} #footer .page_bottom_wrap .quick_link_box .list{ gap:1em 1.5em; flex:1} #footer .page_bottom_wrap .quick_link_box .list > li{ width:100%} #footer .page_bottom_wrap .quick_link_box .list > li .point{ color:#000; font-weight:500;} #footer .page_bottom_wrap .quick_link_box .list .main_quick{ color:#111; font-size:.938em; box-sizing:border-box; cursor:pointer; transition:.2s;} #footer .page_bottom_wrap .quick_link_box .list .main_quick:hover{ color:var(--siteC);} #footer .footer_info_wrap{ padding:3em 0; border-top:1px solid #e5e5e5;} #footer .footer_info_wrap > .inner{ gap:3em;} #footer .footer_info_wrap .info_box{ flex:1; overflow:hidden;} #footer .footer_info_wrap .info_box > li{ float:left; margin:0 2em .75em 0; font-size:.875em; color:#555;} #footer .footer_info_wrap .info_box > li.br{ clear:left;} #footer .footer_info_wrap .info_box > li *{ vertical-align:baseline;} #footer .footer_info_wrap .info_box .point{ color:#000; font-weight:500;} #footer .footer_info_wrap .info_box .copy{ clear:left; margin-top:2em; font-size:.813em; color:#999; text-transform:uppercase;} #footer .sns_box{ display:flex; flex-direction:column; gap:1em;} #footer .sns_box .list{ gap:.5em;} #footer .sns_box .list .sns_icon{ width:2.75em; height:2.75em; border:1px solid #e9e9e9; border-radius:50%; transition:.2s;} #footer .sns_box .list .sns_icon .xi{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; text-align:center; box-sizing:border-box; font-size:1.188em; cursor:pointer;} #footer .sns_box .list .sns_icon .xi:before{ height:1em;} #footer .sns_box .list .sns_icon:hover{ background:var(--siteC); border-color:var(--siteC); color:#fff;} #footer .sns_box .logo{ height:2.5em} #footer .goTop{ z-index:998; position:fixed; right:0; bottom:0; width:3.5em; height:3.5em; text-align:center; background:var(--siteC); color:#fff; opacity:0; transform:translateY(100%); transition:.5s} #footer .goTop .xi{ font-size:1.250em; transition:.3s} #footer .goTop:hover .xi{ transform:translateY(-.25em)} .scroll #footer .goTop{ opacity:1; transform:translateY(0)} /**/ .customer_ctt_wrap{} .customer_ctt_wrap .page_tt{text-align:center; font-size:2.5em; font-weight:bold; margin-bottom:2.5rem; margin-top:1.25rem; position:relative;} .customer_ctt_wrap .page_tt:before{content:''; display:block; width:1px; height:50px; background:#555; position:absolute; left:50%; top:-65px; transform:translateX(-1px);} .customer_tab_wrap{margin-bottom:6rem; background:url('../images/sub/sub_customer/customer_top_bg.jpg') no-repeat center/cover; box-shadow:inset 0px -5px 10px 0px rgba(50, 50, 50, 0.75); position:relative;} .customer_tab_wrap .customer_tit{text-align:center; font-size:2.5em; color:#fff; font-weight:bold; position:absolute; top:35%; left:50%; transform:translateX(-50%);} .customer_tab_wrap .customer_sub_tit{text-align:center; font-size:1.25em; color:#fff; font-weight:400; position:absolute; top:50%; left:50%; transform:translateX(-50%);} .customer_tab_wrap .customer_tab_list{padding:20rem 0 0;} .customer_tab_wrap .customer_tab_list li{width:160px; height:50px; border:1px solid #aaa; box-sizing:border-box; color:#888; border-bottom:0; background:rgba(255,255,255,.7); transition:.3s;} .customer_tab_wrap .customer_tab_list li:not(.on){} .customer_tab_wrap .customer_tab_list li:hover{background:rgba(255,255,255,.8); color:#555;} .customer_tab_wrap .customer_tab_list li.on{background:#fff; width:170px; height:60px; margin-top:-10px; color:#0e6389; border-color:#fff; position:relative; z-index:10;} .customer_tab_wrap .customer_tab_list li a{width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .event_tab_wrap{ margin-bottom:3em; gap:2.5em; text-align:center;} .event_tab_wrap > li{ min-width:10em;} .event_tab_wrap > li a{ display:block; padding:.75em .5em; font-size:1.125em; font-weight:500; color:#555; border-bottom:3px solid #ccc; transition:.3s; position:relative;} .event_tab_wrap > li a:after{content:''; display:block; width:0; height:3px; position:absolute; left:50%; bottom:-3px; background:var(--siteC); transition:.2s cubic-bezier(0.65, 0, 0.35, 1); transform:translateX(-50%);} .event_tab_wrap > li:hover a{ color:var(--siteC);} .event_tab_wrap > li:hover a:after{ width:100%;} .event_tab_wrap > li.on a{ color:var(--siteC); border-color:var(--siteC);} .txt_blue{color:#188abe; vertical-align:baseline;} .guide_wrap{} .guide_wrap .guide_top_wrap{padding-left:6rem; box-sizing:border-box; height:250px; background:url('../images/sub/sub_customer/guide_bg.png') no-repeat center/cover;} .guide_wrap .guide_top_wrap .guide_top_tit{font-size:1.25em; color:#111; line-height:1.6; margin-bottom:.75rem;} .guide_wrap .guide_top_wrap .guide_top_sub{line-height:1.4;} .guide_wrap .guide_head_box{background:#c4eafc; display:flex; height:140px; justify-content:center; align-items:center; border-radius:12px; overflow:hidden; text-align:center;} .guide_wrap .guide_head_box .t1{font-size:1.125em; color:#333; line-height:1.6;} .guide_wrap .guid_body_wrap{margin-top:2rem;} .guide_wrap .guid_body_wrap .content_wrap{margin-bottom:3rem;} .guide_wrap .guid_body_wrap .content_wrap .tt{padding-left:.5rem; margin-bottom:.875rem;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order{} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st{width:32%; border:1px solid #ddd; border-top:2px solid var(--siteC); box-sizing:border-box; padding:1.25rem; margin-bottom:2%; height:260px;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st:nth-last-of-type(-n+3){margin-bottom:0;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st .step_no{display:inline-block; background:#012d41; color:#fff; padding:.375rem 1rem; font-size:.875em; border-radius:15px; margin-bottom:1rem;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st .step_tit{font-weight:bold; margin-bottom:1.5rem;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st .step_ctt{font-size:.875em; line-height:1.6;} .guide_wrap .guid_body_wrap .content_wrap .t1{} .guide_wrap .guid_body_wrap .content_wrap .t1 .xi.xi-headset{font-size:1.125em; margin-top:-2px;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st.n1{background:url('../images/sub/sub_customer/guide01.png') no-repeat right 20px bottom/cover;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st.n2{background:url('../images/sub/sub_customer/guide02.png') no-repeat right 20px bottom/cover;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st.n3{background:url('../images/sub/sub_customer/guide03.png') no-repeat right 20px bottom/cover;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st.n4{background:url('../images/sub/sub_customer/guide04.png') no-repeat right 20px bottom/cover;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st.n5{background:url('../images/sub/sub_customer/guide05.png') no-repeat right 20px bottom/cover;} .guide_wrap .guid_body_wrap .content_wrap .how_to_order .step_st.n6{background:url('../images/sub/sub_customer/guide06.png') no-repeat right 20px bottom/cover;} .about_wrap { margin-bottom: 3.5rem; } .about_wrap .about_bg{ height:400px; margin-top:2em; background:url(../images/sub/sub_about/about_bg.jpg) no-repeat center; background-size:cover;} .about_wrap .about_tbox{background:#fff; margin:-15em auto 0; box-sizing:border-box; padding:4em 10em; box-shadow:0 0 25px rgba(0,0,0,.1);} .about_wrap .about_tbox .in_logo {width: 22em; margin: 0 auto;} .about_wrap .about_tbox .in_tt{ margin-top:1.5em; font-size:1.5em; color:#444; line-height:1.5; font-weight:500;} .about_wrap .about_tbox .in_tx{ margin-top:2em; font-size:1.068em; color:#333; line-height:1.5;} .about_wrap .about_tbox .in_tx > p { margin-bottom:30px;} .vou_wrap{margin-top:5.5rem;} .vou_wrap .pg_tit{ font-size:1.85em; color:#333; text-align:center; font-weight:300; margin-bottom:1em;} .vou_wrap .pg_tit strong{ vertical-align:baseline; font-weight:500;} .vou_wrap .vou_img_top{ height:350px; margin-bottom:2.5em; background-position:center; background-repeat:no-repeat; background-size:cover;} .vou_wrap .vou_info{ width:1200px; margin:-10em auto 0; box-sizing:border-box; padding:3em .5em; box-shadow:3px 3px 10px rgba(0,0,0,0.1); background:#fff; gap: 3.5em 0;} .vou_wrap .vou_info > li{ width:25%; box-sizing:border-box; text-align:center; padding:.5em 1em;} .vou_wrap .vou_info > li:last-child{ border-right:none;} .vou_wrap .vou_info > li .icon{ width:6em; height:6em; border-radius:50%; background:#aaa; margin:0 auto 15px; line-height:6em;} .vou_wrap .vou_info > li .icon .xi{ color:#fff; font-size:2.5em;} .vou_wrap .vou_info > li .tt{ font-size:1.35em; font-weight:600; margin-bottom:10px;} .vou_wrap .vou_info > li .tx{ font-size:1.125em; line-height:1.4;} /* Sub - Company - Style */ .page_con { padding: 3.5em 0; } .page_con.p2{ padding: 6em 0;} .page_con.pt0{ padding-top: 0em;} .summary-wrap {} .summary-wrap .wrap-in { gap: 3.5em; } .summary-wrap .left { flex: 0 0 auto; } .summary-wrap .left .tit {} .summary-wrap .left .tit > h3 { font-size: 2.5rem; } .summary-wrap .right { flex: 1; } .summary-wrap .right .list-wrap { gap: 1.25em;} .summary-wrap .right .list-wrap > li { flex: 1 1 calc(25% - 1.25em); padding: 2em; box-sizing: border-box; background: #F5F5F5; border-radius: 1em; } .summary-wrap .right .list-wrap > li .ico-area { margin-bottom: 2em; width: 4.6875rem; aspect-ratio: 1/1; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; } .summary-wrap .right .list-wrap > li .ico-area > i { font-size: 3.125rem; } .summary-wrap .right .list-wrap > li .txt-area {} .summary-wrap .right .list-wrap > li .txt-area i { display: inline; } .summary-wrap .right .list-wrap > li .txt-area > p { font-size: 1.125rem; color: #333; line-height: 1.5em; } .summary-wrap .right .list-wrap > li .txt-area > p br { display: none; } .info-section {} .info-lay { gap: 3em; } .info-lay .img-area { flex: 1; } .info-lay .img-area .imgfix { border-radius: 1em; overflow: hidden; } .info-lay .txt-area { flex: 0 0 800px; } .info-lay .txt-area .sub-tit { margin-bottom: 2.5rem; } .info-lay .txt-area .sub-tit > p { font-size: 1.5em; } .info-lay .txt-area .sub-tit > p > i { vertical-align: baseline; } .info-lay .txt-area .txt-in {} .info-lay .txt-area .txt-in > p { font-size: 1.25rem; color: #333; line-height: 1.5em; } .info-lay .txt-area .txt-in > p:not(:last-child) { margin-bottom: 1rem; } .info-lay.st2 {} .info-zgzg {} .info-zgzg .list { gap: 0 4.375rem; } .info-zgzg .list > li { margin-bottom: 6.25rem; flex: 1 1 calc(33% - 4.375em); max-width: calc(33% - 2.9em); /* min-height: 530px; height: 530px; */ } .info-zgzg .list > li:nth-child(2), .info-zgzg .list > li:nth-child(5), .info-zgzg .list > li:nth-child(8) { margin-top: 12.75rem; } .info-zgzg .list > li:nth-child(4), .info-zgzg .list > li:nth-child(6), .info-zgzg .list > li:nth-child(7) { margin-top: -12rem; } .info-zgzg .list > li:nth-child(5), .info-zgzg .list > li:nth-child(8) { margin-top: 0; } .info-zgzg .list > li .img-area { /* height: 15.625rem; */ border-radius: 1em 1em 0 0; overflow: hidden; } .info-zgzg .list > li .txt-area { padding: 2em; box-shadow: 0 10px 20px rgba(0,0,0,.05); background: #fff; border-radius: 0 0 1em 1em; overflow: hidden; } .info-zgzg .list > li .txt-area > p.fwB { margin-bottom: 1.5rem; font-size: 1.5rem; } .info-zgzg .list > li .txt-area > p.fwR { color: #555; font-size: 1.25rem; line-height: 1.5em; } .company-location-wrap {} .company-location-wrap .info-tit { margin-bottom: 1.5em; } .company-location-wrap .info-tit .txt { font-size: 1.25rem; padding-left: 0.75em; position: relative; } .company-location-wrap .info-tit .txt::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; aspect-ratio: 1/1; border-radius: 50%; background: var(--siteC); } .company-location-wrap .info-tit .txt span { color: #888; } .company-location-wrap .info-tit .txt a:hover { text-decoration: underline; } .company-location-wrap .root_daum_roughmap .wrap_controllers { display: none; } /* // */ /* online */ .page_onlineT .onlineT-sec { margin-bottom: 3em; padding-bottom: 3em; border-bottom: 1px solid #ddd; } .page_onlineT .onlineT-proc .onlineT-sec { border-bottom: none; } .page_onlineT .page_tit { flex: 0 0 20em; margin-bottom: 0; } .page_onlineT .tt { font-size: 2rem; } .page_onlineT .cont_wrap > p { font-size: 1.25rem; line-height: 1.5em; } .page_onlineT .cont_wrap > p > a { vertical-align: top; } .page_onlineT .cont_wrap ul > li { font-size: 1.25rem; padding-left: 1em; position: relative; margin-bottom: 1rem; } .page_onlineT .cont_wrap ul > li::before { content: '-'; position: absolute; left: 0; top: 0; color: var(--siteC); } /**/ /* main - new layout */ body.main .visualSlider_wrap { gap: 5em; padding: 7.5em 0; position: relative; } body.main .visualSlider_wrap .sym_deco { position: absolute; right: -15%; top: 0; width: 350px; height: 350px; z-index: -1; filter: blur(50px); opacity: 0.2; } body.main .visualSlider_wrap .cir_deco { position: absolute; left: -15%; bottom: 0; width: 350px; height: 350px; background-color: var(--siteC4); filter: blur(70px); border-radius: 50%; opacity: 0.15; } body.main .visualSlider_wrap .main_search { position: relative; left: 0; top: 0; transform: translate(0); flex: 1; text-align: left; } .visualSlider_wrap .slogan .tt { color: #000; } .main_video { flex: 1; } .main_video .vod_wrap { width: 100%; min-height: 350px; border-radius: 1em; overflow: hidden; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1); } .main_video .vod_wrap video { object-fit: contain; width: 100%; height: 100%; } .visualSlider_wrap .main_search_wrap { width: 100%; } .visualSlider_wrap .main_search_wrap .inpst { font-size: 1rem; } .visualSlider_wrap .main_search_wrap .ms_inner { flex: 1 1 100%; } .visualSlider_wrap .main_search_wrap label:after { color: #000; } .visualSlider_wrap .main_search_wrap .ms_link, .visualSlider_wrap .main_search_wrap .ms_join { width: calc(50% - 0.5em); } .visualSlider_wrap .main_search_wrap .ms_join .ms_f .xi { font-size: 1.500em; transition: 0.2s; } .visualSlider_wrap .main_search_wrap .ms_join .ms_f:hover .xi { transform: rotateY(180deg); } .visualSlider_wrap .main_search_wrap .ms_inner>li:nth-child(1) { width: 8.5em; } .visualSlider_wrap .main_search_wrap .ms_inner>li:nth-child(2) { width: 8.5em; } .visualSlider_wrap .main_search_wrap label, .visualSlider_wrap .main_search_wrap .inp { background-color: #fff; color: #000 !important; } .visualSlider_wrap .main_search_wrap .inp::placeholder { color: #555 !important; } .main_con .main_quick_icon_wrap .inner { margin-top: 0; background-color: var(--siteBg1); } @media screen and (max-width:768px) { body.main .visualSlider_wrap { flex-wrap: wrap; gap: 3em; padding: 0 0 3.5em 0; } body.main .visualSlider_wrap .deco { display: none; } body.main .visualSlider_wrap .main_search, body.main .visualSlider_wrap .main_video { flex: 1 1 100%; width: 100%; } .main_video .vod_wrap { min-height: auto; } body.main .visualSlider_wrap .main_video { order: 1; } body.main .visualSlider_wrap .main_search { order: 2; } .visualSlider_wrap .main_search_wrap { gap: 0.5em; } .visualSlider_wrap .main_search_wrap .ms_inner>li:nth-child(2) { width: 5em; } .visualSlider_wrap .main_search_wrap label, .visualSlider_wrap .main_search_wrap .inp { background: rgba(0, 0, 0, .5); color: #fff !important; } .visualSlider_wrap .main_search_wrap .inp::placeholder { color: rgba(255, 255, 255, 0.5) !important; } .visualSlider_wrap .main_search_wrap .ms_link, .visualSlider_wrap .main_search_wrap .ms_join { width: 100%; } .main_con .main_quick_icon_wrap .inner { padding: 1.5em 0; } .logo_list { gap: 3em 1em; } .logo_list>li { flex: 0 0 calc(50% - 1em); } .logo_list>li .logo_wrap .imgfix { width: 100%; height: 15vw; } } /**/ .wba {word-break: break-all;} .sd-sec .page_tit { margin-bottom: 0; } .sd-sec.active .page_tit { margin-bottom: 1em; } .sd-sec .cont_wrap { display: none; font-size: 0.875rem; } .sd-sec.active .cont_wrap { display: block; } .sd-sec .sd-btn .xi { transition: 0.3s; } .sd-sec.active .sd-btn .xi { transform: rotate(180deg); } .sd-sec .cont_wrap:not(.cont_wrap_border) * { border: none !important; } .sd-sec .page_line { margin: 2em 0; } /*서브 공통*/ /*flex box*/ .flex_box { } .flex_box.s1 { margin: 0 0 -1em -1em; } .flex_box.s2 { margin: 0 0 -2em -2em; } .flex_box.s3 { } .flex_box.s4 { } .flex_box.s5 { } .flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } .flex_box .fst1 > li > .in{ margin: 0 0 1em 1em;} .flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } .flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } .flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } .flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } .flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst7 > li { flex: 1 1 14.28%; max-width: 14.28%; } .flex_box .fst7 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst8 > li { flex: 1 1 12.5%; max-width: 12.5%; } .flex_box .fst8 > li > .in { margin: 0 0 1em 1em; } .flex_box li > a { display: block; } /*company*/ .intro_wrapper{} .intro_wrapper .title{ font-size: 2.15em; font-weight: 600; line-height: 1.4; margin-bottom: 1.5em;} .intro_wrapper .intro_con{ display: flex; gap: 4em; align-items: center; margin-bottom: 4em;} .intro_wrapper .intro_con:last-of-type{ margin-bottom: 0em;} .intro_wrapper .intro_con .img_con{ width: 50%; height: 50vh; overflow: hidden;} .intro_wrapper .intro_con .img_con > img{ width: 100%; height: 100%; object-fit: cover;} .intro_wrapper .intro_con .info{ width: 50%;} .intro_wrapper .intro_con .info .desc_list{} .intro_wrapper .intro_con .info .desc_list > .tt{ font-size: 1.063em; line-height: 1.6; color: #444; margin-bottom: 1em;} .intro_wrapper .intro_con .info .desc_list > .tt:last-of-type{ margin-bottom: 0em;} .intro_wrapper .intro_con .info > .tit{ font-size: 1.915em; font-weight: 600; margin-bottom: 1.25em;} .intro_wrapper .intro_con .info > .sub_tit{ font-size: 1.15em; line-height: 1.4; font-weight: 600; margin: 2em 0;} .value_wrap{ background: #3f5088;} .value_wrap .valueList{ margin-top: 3em; padding: 0 8vw; box-sizing: border-box;} .value_wrap .valueList > li{ display: flex;} .value_wrap .valueList > li > .in{ flex: 1; padding: 3em 2.5em; text-align: center; box-sizing: border-box; background: rgba(255,255,255, .15); border-radius: 1em;} .value_wrap .valueList > li > .in > .icon{} .value_wrap .valueList > li > .in > .icon > img{ width: 8em; height: 100px; object-fit: contain;} .value_wrap .valueList > li > .in > .tt{ margin: 1.5em 0; font-size: 1.215em; text-align: center; font-weight: 600; color: #fff;} .value_wrap .valueList > li > .in > .desc{ font-size: 1em; color: rgba(255,255,255, .85); line-height: 1.4;} .inp-info.error { font-size: .75rem; margin-top: 0.625rem; } .sns_login { display:flex; gap:0 2em; } .sns_login > li > a { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.75em 0 } .sns_login > li > a .tt { color:#111; font-weight:500; font-size:.938em } .sns_login > li > a .ico { width:3em; height:3em; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f5f5f5 } .sns_login > li > a .ico .xi { font-size:1.5em } .sns_login > li > a.nv .ico { background:#03c75a; color:#fff } .sns_login > li > a.ka .ico { background:#fee500; color:#111 } .sns_login.s1 .ico { font-size:1.25em }