/* 공통 레이아웃 */ .b_inner { width: 94%; max-width: 1520px; margin: 0 auto; position: relative; } /* sub visual */ .b_sv_box{padding: 220px 0 80px; text-align: center; border-bottom: 1px solid #d9d9d9;} .b_sv_box h2{margin-bottom: 40px;} .b_sv_box .b_navi_box #b_gnb > li {display: none;} .b_sv_box .b_navi_box #b_gnb > li.on {display: block;} .b_sv_box .b_navi_box #b_gnb > li > a{display: none;} .b_sv_box .b_navi_box .b_sub_menu{display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; box-shadow: 3px 0 28px rgba(177,164,236,.3); width: fit-content; margin: 0 auto;} .b_sv_box .b_navi_box .b_sub_menu li a{display: flex; height: 62px; align-items: center; justify-content: center; padding: 0 50px; font-size: 1.125rem; font-weight: 500; position: relative;} .b_sv_box .b_navi_box .b_sub_menu li a:after{content:''; width:1px; height:20px; background-color: #d9d9d9; position:absolute; right: 0; top:50%; transform: translateY(-50%);} .b_sv_box .b_navi_box .b_sub_menu li:last-child a:after{display: none} .b_sv_box .b_navi_box .b_sub_menu li.on a{background-color: #B56AFF; color:#fff; } .b_sv_box .b_navi_box .b_sub_menu li.on a:after{display: none} .b_sv_box .b_m_navi_box{display:none; width:310px; margin: 0 auto; position: relative; box-shadow: 0 3px 14px rgba(177,164,236,.17);} .b_sv_box .b_m_navi_box .b_now_box{width: 100%; background-color: #9f91e4; color:#fff; height: 40px; cursor:pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 2.5px; padding:0 20px 0 15px} .b_sv_box .b_m_navi_box .b_now_box img{display: block; transform: rotate(180deg); transition: transform .3s;} .b_sv_box .b_m_navi_box #b_gnb > li {display: none;} .b_sv_box .b_m_navi_box #b_gnb > li.on {display: block;} .b_sv_box .b_m_navi_box #b_gnb > li > a{display: none;} .b_sv_box .b_m_navi_box .b_sub_menu {position: absolute; left: 0; top: 40px; width:100%; background-color: #fff; box-shadow: 0 3px 14px rgba(177,164,236,.17); display: none;} .b_sv_box .b_m_navi_box .b_sub_menu li{height: 40px; display: flex; align-items: center; padding: 0 15px;} .b_sv_box .b_m_navi_box .b_sub_menu li.on{color: #9f91e4;} .b_sv_box .b_m_navi_box .b_now_box img.on{transform: rotate(0deg); transition: transform .3s;} /* 탭 메뉴 스타일 - page_0501.php 등에서 사용 */ .sub_tab_wrap { margin-top: 40px; } .sub_tab { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; padding: 0; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 3px 0 28px rgba(177,164,236,.3); width: fit-content; margin: 0 auto; } .sub_tab li { margin: 0; } .sub_tab li a { display: flex; height: 62px; align-items: center; justify-content: center; padding: 0 50px; font-size: 1.125rem; font-weight: 500; position: relative; background-color: #fff; color: #1D1D1F; text-decoration: none; transition: all 0.3s; } .sub_tab li a:after { content: ''; width: 1px; height: 20px; background-color: #d9d9d9; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .sub_tab li:last-child a:after { display: none; } .sub_tab li.on a { background-color: #B56AFF; color: #fff; } .sub_tab li.on a:after { display: none; } .sub_tab li a:hover { background-color: #B56AFF; color: #fff; } @media screen and (max-width: 1080px){ .b_sv_box{padding: 150px 0 50px; } .b_sv_box .b_navi_box {display: none;} .b_sv_box .b_m_navi_box{display:block;position: relative; z-index: 5;} .sub_tab li a { padding: 0 30px; font-size: 1rem; } } @media screen and (max-width: 720px){ .b_sv_box{padding: 100px 0 30px;position:relative;z-index:5; } .sub_tab li a { padding: 0 20px; height: 50px; font-size: 0.875rem; } } /* quick menu bar */ .b_menu_bar { position: fixed; right: 3%; bottom: 50px; z-index: 10; } .b_menu_bar ul { border-radius: 10px; display: flex; flex-direction: column; align-items: flex-end; } .b_menu_bar ul li { background-color: #fff; height: 70px; width: 70px; border-radius: 100px; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; overflow: hidden; position: relative; margin-bottom: 10px; box-shadow: 0 0 15px 5px #00000010; } @media screen and (max-width:1366px) { .b_menu_bar{ right:1%; } } /* 메뉴 아이콘 및 텍스트 */ .b_menu_bar ul li a { display: flex; flex-flow:row-reverse nowrap; align-items: center; font-size: 1.063rem; height: 100%; position: relative; } .b_menu_bar ul li figure { width: 70px; z-index: 5; display: flex; justify-content: center; align-items: center; } .b_menu_bar ul li span { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); z-index: 2; display: none; font-weight: 600; width: 240px; color: #fff; } /* 호버 시 크기 확장 및 색상 변경 */ .b_menu_bar ul li:hover { width: 320px; border-radius: 100px; } .b_menu_bar ul li:hover span { display: block; } /* 개별 메뉴 색상 */ .b_menu_bar ul li:nth-child(1) span{color: #6AC7FA; } /* 파란색 */ .b_menu_bar ul li:nth-child(2) span{color: #B56AFF; } /* 보라색 */ .b_menu_bar ul li:nth-child(3) span{color: #FFCB33; } /* 노란색 */ .b_menu_bar ul li:nth-child(4) span{color: #FF6633; } /* 주황색 */ .b_menu_bar ul li:nth-child(5) span{color: #62E2C9; } /* 민트색 */ .b_menu_bar ul li:nth-child(6) span{color: #D81A62; } /* 빨간색 */ /* .b_menu_bar ul li:nth-child(7) span{color: #78A74E; } 초록색 */ /* 모바일 반응형 */ @media screen and (max-width: 720px) { .b_menu_bar { bottom: 20px; right: 2%; } .b_menu_bar ul li { width: 50px; height: 50px;margin-bottom:5px; } .b_menu_bar ul li figure { width: 50px; } .b_menu_bar ul li img { height: 50px; } .b_menu_bar ul li span { font-size: 9px; width: 130px; left: 15px; } .b_menu_bar ul li:hover{width: 150px;} } @media screen and (max-width: 720px){ .b_menu_bar ul.mrware li img { height: 25px; } } /* 솔루션/서비스 서브 공통 */ .b_sv_part .b_sub_txt{color: #ffcc21;} .b_sv_part .b_tit_box .b_tit_txt {margin: 30px 0 40px;} /* 서브 공통 */ .b_sub_sec {padding: 200px 0; background-color: #f5f5f5; } .b_sub_sec .b_tit_box{text-align: center; margin-bottom: 70px;} .b_sub_sec .b_tit_box .b_sub_txt{margin-bottom: 30px; display: block;} .b_sub_sec .b_tit_box .b_cont_txt {margin-top: 20px;} @media screen and (max-width: 1080px){ .b_sub_sec {padding: 150px 0;} } @media screen and (max-width: 720px){ .b_sv_part .b_tit_box .b_tit_txt {margin: 15px 0 20px;} .b_sub_sec {padding: 100px 0;} .b_sub_sec .b_tit_box{ margin-bottom: 45px;} .b_sub_sec .b_tit_box .b_sub_txt{margin-bottom: 15px; } .b_sub_sec .b_tit_box .b_cont_txt{font-size:12px; word-break:keep-all; } } /* 창의솔루션 > VRWARE Edu School */ .c_blue{color:#6AC7FA;} .page_0101_top figure{width: 100%;} .page_0101_top figure img{width:100%;} .page_0101_1{ padding-top:50px ; padding-bottom:380px} .page_0101_1 .b_tit_box p{color:#1D1D1F;} .page_0101_1 .b_tit_box .b_logo_box{margin-top:20px; margin-bottom:100px;} .page_0101_1 .b_tit_box .b_logo_box img{max-width:300px; width:40%;} .page_0101_1 .b_tit_box .b_tit_txt {color:#1D1D1F; } .page_0101_1 .b_tit_box .b_cont_txt {color:#8F8F93; font-weight: 600; } .page_0101_1 .b_tit_box .tit_rel{position:relative; display: inline-block;} .page_0101_1 .b_tit_box .tit_abs{position:absolute; top:-10px; left:50%; transform: translate(-50%,-50%);display:block;width:100%; } .page_0101_1 .b_tit_box .b_more_btn{margin-top: 50px; background-color: #6AC7FA; color:#fff;} .page_0101_1 .b_tit_box .b_more_btn figure{background-color:#ffffff60;} @media screen and (max-width: 1080px){ } @media screen and (max-width: 720px){ .page_0101_top{padding-top:55px;} .page_0101_1 .b_tit_box .b_logo_box{margin-top:10px; margin-bottom:50px;} .page_0101_1{ padding-top:30px ;padding-bottom: 220px;} .page_0101_1 .b_tit_box .b_more_btn {margin-top: 25px;padding: 0 5px 0 15px;} } .page_0101_2 {margin-top: -180px; margin-bottom:150px; padding: 0;} .page_0101_2 .b_box_wrap {max-width: 1390px; margin: 0 auto; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content:center; gap:20px; position: relative;} .page_0101_2 .b_txt_box{ position: relative;width: 44%;aspect-ratio: 9 / 6;} .page_0101_2 .b_tit_box .b_tit_txt {color:#1D1D1F; } .page_0101_2 .b_tit_box .b_cont_txt {color:#8F8F93; font-weight: 600; margin-top:40px;} .page_0101_2 .b_txt_box ul li{aspect-ratio: 9 / 6; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; opacity: 0; background-color: #f5f5f5;} .page_0101_2 .b_txt_box ul li.b_txt_01{opacity: 1;} .page_0101_2 .b_txt_box ul li:last-child{margin-bottom: 0;} .page_0101_2 .b_txt_box li .b_sub_txt{display: flex; align-items: center; justify-content: center; width:240px ; height: 42px; letter-spacing: 0; border-radius: 20px; border:1px solid #6AC7FA; color:#6AC7FA; margin-bottom:30px;} .page_0101_2 .b_txt_box li .b_tit_txt{margin: 35px 0 15px;} .page_0101_2 .b_txt_box li .b_cont_txt{color:#8F8F93; line-height: 1.6em; word-break: keep-all;} .page_0101_2 .b_img_box{width:50%; aspect-ratio: 9/5; } .page_0101_2 .b_img_box ul{position: relative;} .page_0101_2 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0101_2 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0101_2 .b_img_box li figure img{display: block; height: 100%; width: 100%; object-fit: cover;} .page_0101_2 .b_img_box li:nth-child(1){opacity: 1;} .page_0101_2 .b_img_box li:nth-child(1){z-index:1} .page_0101_2 .b_img_box li:nth-child(2){z-index:3} .page_0101_2 .b_img_box li:nth-child(3){z-index:5} .page_0101_2 .b_img_box li:nth-child(4){z-index:7} .page_0101_2 .b_img_box li:nth-child(5){z-index:9} .page_0101_2 .b_img_box li:nth-child(6){z-index:11} @media screen and (max-height:800px) { .page_0101_2 .b_tit_box{margin-bottom:40px;} .page_0101_2 .b_tit_box .b_cont_txt{margin-top:20px;} } @media screen and (max-width: 1080px){ .page_0101_2 .b_tit_box .b_cont_txt {margin-top:20px;} /* .page_0101_2 .b_txt_box ul li {aspect-ratio: 9 / 6;padding-right:0px;} */ .page_0101_2 .b_box_wrap {flex-direction: column-reverse; justify-content:flex-end;} .page_0101_2 .b_img_box, .page_0101_2 .b_img_box li {width: 100%;} .page_0101_2 .b_txt_box ul {min-height: none;} .page_0101_2 .b_txt_box, .page_0101_2 .b_txt_box ul li {width: 100%; aspect-ratio: 4 / 1;} } @media screen and (max-width: 830px){ .page_0101_2 {padding-bottom: 60px;} /* .page_0101_2 .b_txt_box ul li{aspect-ratio:unset; height: 100%; margin-bottom: 0; justify-content: flex-start; padding-bottom: 0px; padding-right:20px;} */ .page_0101_2 .b_txt_box li .b_sub_txt{width: 165px; height: 26.5px; font-size: 12px; margin-bottom:10px;} .page_0101_2 .b_txt_box li .b_tit_txt {margin: 20px 0 10px;} } @media screen and (max-width: 720px){ .page_0101_2 {margin-top: -100px; } .page_0101_2 .b_txt_box ul {min-height: 140px;} .page_0101_2_en .b_txt_box ul {min-height: 160px;} .page_0101_2_en .b_txt_box ul li p.b_cont_txt{line-height: 1.4;} } .page_0101_3 { background: url(/img/sub/0101/vrware_school_sec03_bg.png) top center / cover; background-color: #f5f5f5; overflow: hidden; padding-bottom:100px;} .page_0101_3 .b_tit_box{color: #fff;} .page_0101_3 .b_tit_box figure{ width:70%; margin: 0 auto; margin-top:100px;} .page_0101_3 .b_tit_box figure img{width:100%;} .page_0101_3 .b_top_box{display: flex; align-items: center ; justify-content: center; margin-bottom: 60px;} .page_0101_3 .b_top_box figure{border-radius: 15px; overflow: hidden;} .page_0101_3 .b_top_box img{display: block; max-width: 100%;} .page_0101_3 .b_bot_box {margin:100px auto; height: fit-content; position: relative; display:flex; flex-flow: column; gap:80px; align-items:center; justify-content: center;} .page_0101_3 .b_bot_box ul{display: flex; align-items: center; gap: 35px; } .page_0101_3 .b_bot_box ul.b_text_list{height:100px; color:#fff; text-align: center; position:relative; width: 100%;} .page_0101_3 .b_bot_box ul.b_text_list li{display: none; width:100%; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);} .page_0101_3 .b_bot_box ul.b_text_list li.on{display:block;} .page_0101_3 .b_bot_box ul.b_text_list p{word-break: keep-all;} .page_0101_3 .b_bot_box ul.b_text_list span.c_red{color:#F45831;} .page_0101_3 .b_bot_box ul.b_img_list li{transition:all 0.5s ease; padding-top:25px;display:flex; flex-flow: column; gap:10px; align-items: center; justify-content: center; text-align: center; color:#00000040; aspect-ratio: 1 / 1;width: 220px; display: block; border-radius: 200px; background-color: #fff;} .page_0101_3 .b_bot_box ul.b_img_list li.on{background-color:#000000 ; color:#fff;} .page_0101_3 .b_bot_box figure{width: 100%;} .page_0101_3 .b_bot_box ul.b_img_list li.on img{opacity:1;} .page_0101_3 .b_bot_box figure img{transition:all 0.5s ease; display: block; opacity:0.5; height: 90px; margin:0 auto;} @media screen and (max-width: 720px){ .page_0101_3 .b_tit_box .b_cont_txt {margin-top: 10px;} .page_0101_3 .b_top_box{margin-bottom: 30px;} .page_0101_3 .b_bot_box {margin:40px auto; gap:20px; height: max-content;} .page_0101_3 .b_bot_box ul{gap: 15px;} .page_0101_3 .b_bot_box ul.b_img_list{border:none; height:200px;} .page_0101_3 .b_bot_box ul.b_img_list li{transition:none; background-color:#000000 ; color:#fff; display: none; position:absolute; left:50%;top:0%; width:200px; transform: translateX(-50%);border:none;} .page_0101_3 .b_bot_box ul.b_img_list li.on{display:block;} .page_0101_3 .b_bot_box ul.b_img_list li p{font-size: 20px;} .page_0101_3 .b_bot_box figure img{transition:none; opacity:1;} } /* ------------------------------------------------------ */ .page0101_4 img {width:100%;} .page0101_4 .b_tit_box figure{ width:40%; margin: 0 auto; margin-top:100px;} .page0101_4 .b_tit_box figure img{width:100%;} /* 슬라이드 아이템 */ .page0101_4 .cert_wrap { width: 100%; background-color: #fff; border-radius: 20px; text-align: center;cursor: pointer; padding: 0; box-shadow: 0 0px 7px 3px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center;overflow: hidden;} .cert_logo{ height: 100%; overflow: hidden;} .cert_logo img {width:100%; height: auto;} .cert_text {color: #1D1D1F; padding:30px; text-align: left; height:220px;} .cert_text .b_cont_txt{margin-top:20px; height: fit-content; color: #8F8F93; word-break: keep-all;} .page0101_4 .slide_btn{display: flex;justify-content: space-between; align-items: center;width: 255px; height: 55px; background-color: #000000; border: 0; color: #fff; padding: 0 7px 0 17px;box-shadow: none;} .page0101_4 .slide_btn figure{background-color: #fff; width: 34px;} .page0101_4 .slide_btn figure img {filter: invert(1); width: 19px;} .page0101_4 .swiper-container {padding:15px;} .page0101_4 .swiper-container .swiper-slide{width:300px;} @media screen and (max-width:1400px) { .page0101_4 .swiper-slide { width: 300px !important; margin-right: 20px !important; } } @media screen and (max-width:1000px) { .page0101_4 .swiper-slide { width: 300px !important; margin-right: 20px !important; } } @media screen and (max-width: 860px) { .cert_logo{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;} .page0101_4 .b_tit_box figure{ width:80%; margin-top:50px;} .swiper-controls { text-align: center;} .page0101_4 .swiper-container {padding:25px 0;} .page0101_4 .swiper-slide { width: 100% !important; margin: 0 auto; } #specs_swiper .swiper-pagination-bullet{width: 8px!important; height: 8px!important;} .page0101_4 .cert_logo{overflow: hidden; height: 270px;} .page0101_4 .cert_text{padding:20px 20px 0 20px;} .page0101_4 .cert_wrap{width:80%; max-width: 400px; margin:0 auto;height: 360px;} .slide_btn{width: 90%;height: 45px;} .slide_btn figure img { width: 15px;} .slide_btn figure{ width: 30px;} .cert_text{margin-bottom: 30px;} .page0101_4 .swiper-controls{ text-align: center;} } @media screen and (max-width: 500px){ .page0101_4 .cert_text{ margin:0 ;} .page0101_4 .cert_wrap{height: 300px;} .page0101_4 .cert_wrap .cert_logo img{width:100%; height:auto;} } /* -------------------------------------------------------- */ .page_0101_5{background-color: #fff;} .page_0101_5 .b_cont_box{display: flex; align-items: center; max-width: 1360px; margin:0 auto; width:100%; position: relative; justify-content: space-between;} .page_0101_5 .b_img_box{width: 49%; aspect-ratio: 10 / 6;} .page_0101_5 .b_img_box ul{position: relative;} .page_0101_5 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0101_5 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0101_5 .b_img_box li figure img{display: block; max-width: 100%;} .page_0101_5 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0101_5 .b_img_box li.b_img_02 {z-index: 3;} .page_0101_5 .b_img_box li.b_img_03 {z-index: 5;} .page_0101_5 .b_img_box li.b_img_04 {z-index: 7;} .page_0101_5 .b_txt_box {width: 49%;} .page_0101_5 .b_txt_box li {padding:30px 0; border-bottom:1px solid #d9d9d9; } .page_0101_5 .b_txt_box li:last-child{border-bottom: 0;} .page_0101_5 .b_txt_box .b_num{display:inline-block; background-color: #6AC7FA30; color:#fff; border-radius: 50px; padding:8px 20px;} .page_0101_5 .b_txt_box .b_cont{margin-top: 20px; color:#8F8F9330; word-break: keep-all;} .page_0101_5 .b_txt_box li.b_img_01 .b_num{background-color: #6AC7FA; color:#fff; opacity:1;} .page_0101_5 .b_txt_box li.b_img_01 .b_cont{color:#8F8F93;} @media screen and (max-width: 1080px){ .page_0101_5 .b_tit_box{margin-bottom: 50px;} .page_0101_5 .b_txt_box li {padding: 20px 0;} .page_0101_5 .b_txt_box .b_cont {margin-top: 12px;} } @media screen and (max-width: 980px){ .page_0101_5 .b_cont_box{flex-direction: column-reverse; justify-content: center;} .page_0101_5 .b_txt_box {width: 100%; max-width: 560px;} .page_0101_5 .b_img_box {width: 100%; max-width: 560px;} .page_0101_5 .b_img_box ul{height: 100%;} .page_0101_5 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0101_5 .b_txt_box ul{height: 120px; position: relative; margin-bottom:10px;} .page_0101_5 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; border-bottom: 0; background-color: #fff; padding: 0 10px;} .page_0101_5 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0101_5 .b_txt_box li.b_txt_02{z-index: 3;} .page_0101_5 .b_txt_box li.b_txt_03{z-index: 5;} .page_0101_5 .b_txt_box li.b_txt_04{z-index: 7;} .page_0101_5 .b_txt_box .b_num{background-color: #6AC7FA; color: #fff;} .page_0101_5 .b_txt_box .b_cont{color:#8F8F93;} } @media screen and (max-width: 720px){ .page_0101_5 .b_txt_box .b_num{padding:5px 14px;} .page_0101_5 .b_txt_box .b_cont{margin-top: 10px;} .page_0101_5 .b_txt_box ul{height: 90px; } .page_0101_5 .b_img_box li figure{border-radius: 7.5px;} } /* -------------------------------------------------------- */ .page0101_6 .b_inner .b_cont_box ul{display:flex; flex-flow:row nowrap;align-items: center; justify-content: center; gap:25px 25px; } .page0101_6 .b_inner .b_cont_box ul li{width:fit-content;} .page0101_6 .b_inner .b_cont_box ul li>div{width:210px; height:280px; margin:0 auto; box-shadow: 0 0 5px 3px #1D1D1F30 ;display:flex; flex-flow: column; justify-content: center;border-radius: 20px; padding-left:20px;} .page0101_6 .b_inner .b_cont_box ul li div.awards{align-items: center; padding:10px; } .page0101_6 .b_inner .b_cont_box ul li.bg_black>div{background-color:#1D1D1F; color:#fff;} .page0101_6 .b_inner .b_cont_box ul li.bg_white>div{color:#1D1D1F; background-color:#fff;} .page0101_6 .b_inner .b_cont_box ul li.bg_blue>div{background-color:#6AC7FA; color:#fff;} .page0101_6 .b_inner .b_cont_box ul li.bg_white .icon_wrap{ width:100%; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: center;} .page0101_6 .b_inner .b_cont_box ul li.bg_white .icon_wrap figure{width:50%; display:flex; flex-flow: column; align-items: center; justify-content: center; text-align:center; } .page0101_6 .b_inner .b_cont_box ul li.bg_white .icon_wrap figure img{width:60%;} .page0101_6 .b_inner .b_cont_box ul li.bg_white .icon_wrap figure p{word-break: keep-all;} /* 영문페이지 특정 css */ .page0101_6_en .b_inner .b_cont_box ul li div.awards p{font-size: 12px;} @media screen and (max-width:1400px) { .page0101_6 .b_inner .b_cont_box ul{flex-flow:row wrap; width:80%; margin:0 auto;} } @media screen and (max-width:860px) { .page0101_6 .b_inner .b_cont_box{ overflow: hidden; padding-top:20px; } .page0101_6 .b_inner .b_cont_box .swiper-pager{ display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; margin-top:30px;} .page0101_6 .b_inner .b_cont_box ul{ flex-flow:row nowrap; gap:0; justify-content: flex-start; width:100%;} .page0101_6 .b_inner .b_cont_box ul li{width:100%; text-align:center; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;} .page0101_6 .b_inner .b_cont_box ul li>div{width:190px; margin:0 auto;padding-left:0;} .page0101_6 .b_inner .b_cont_box .swiper-pagination-bullet{background:#7d61f7!important;} .page0101_6 .b_inner .b_cont_box .swiper-pagination-bullet{width: 12px!important; height: 12px!important;} /* 영문페이지 특정 css */ .page0101_6_en .b_inner .b_cont_box ul li .fs_32{font-size: 2.25rem;}/* .fs_36과 같은 사이즈 */ } /* -------------------------------------------------- */ .page0101_7{background-color: #f5f5f5;} .page0101_7 .b_tit_box .b_cont_txt{margin-top:60px;} .page0101_7 .specs_wrap .swiper-slide p{width: 100%; text-align: center;margin-bottom:20px;} .page0101_7 .specs_wrap .swiper-slide figure{width:80%; margin:0 auto;} .page0101_7 .specs_wrap .swiper-slide figure img{max-height: 400px; width: fit-content; max-width: 100%; margin:0 auto;} .page0101_7 .specs_wrap .swiper-slide picture{width:100%; height:auto; margin:0 auto; display: flex; align-items: center; justify-content: center;} @media screen and (max-width:790px) { .page0101_7{ padding-top:50px;}; .page0101_7 .specs_wrap .swiper-slide p{width: 100%; text-align: center;} .page0101_7 .specs_wrap .swiper-slide figure{width:90%;} .page0101_7 .specs_wrap .swiper-slide picture{height:100%;} .page0101_7 .specs_wrap .swiper-slide picture img{height:100%; width:auto; object-fit: cover;} } /* ----------------------------------------------------- */ .page0101_8{padding-top:0px;} .page0101_8 .b_cont_box{display: flex; justify-content: center; align-items: center; border-radius: 20px; overflow: hidden;} .page0101_8 .b_cont_box iframe{width:90%; max-width:1000px; aspect-ratio: 3.556 / 2; margin:0 auto;border-radius: 20px; overflow: hidden;} /* ----------------------------------------------------- */ .page0101_9{background-color: #fff;} .page0101_9 .b_inner .b_cont_box figure{width:50%; min-width: 300px; margin:0 auto;} .page0101_9 .b_inner .b_cont_box figure img{width: 100%; margin:0 auto;} /* ----------------------------------------------------- */ /* --------------최하단 배너 css // 0101_5 겹침 주의------------------- */ .page_0101_5.b_banner_sec{padding:0;} .page_0101_5 .b_top_box {display: flex; align-items: center; } .page_0101_5 .b_top_box > div{width: 50%; height: 350px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;} .page_0101_5 .b_box_03{background: url(/img/sub/0101/vrware_school_banner01_bg.png) no-repeat bottom center / contain; height: 800px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:200px; overflow: hidden; background-color:#f5f5f5;} .page_0101_5 .b_top_box > div figure img{display: block; max-width: 100%; } .page_0101_5 .b_top_box h5{margin-bottom: 20px;word-break: keep-all;} .page_0101_5 .b_top_box .b_img_box{margin-right: 10%;} .page_0101_5 .b_top_box .b_txt_box{text-align: center; padding-right: 30px;} .page_0101_5 .b_box_01 .b_txt_box p{color: #fff; padding:25px; border:2px solid rgba(255,255,255,.5); border-radius: 10px; margin:0 auto; margin-bottom: 20px; width: fit-content; word-break: keep-all;} .page_0101_5 .b_box_01 .b_txt_box span{color: #fff; word-break: keep-all;} .page_0101_5 .b_box_02 .b_more_btn{width: 208px; height:45px; background-color: #000000; border:0; color: #fff; padding: 0 7px 0 30px; box-shadow: none;} .page_0101_5 .b_box_02 .b_more_btn figure{background-color: #fff; width: 34px;} .page_0101_5 .b_box_02 .b_more_btn figure img{filter:invert(1); width: 19px;} /* .page_0101_5 .b_box_02 .b_more_btn:hover span{transform: translateX(80px); } .page_0101_5 .b_box_02 .b_more_btn:hover figure{transform: translateX(-158px); } .page_0101_5 .b_box_02 .b_more_btn:hover figure img{transform: rotate(0);} */ .page_0101_5 .b_box_03 .b_logo_box img{display: block; max-width: 100%;} .page_0101_5 .b_box_03 p{margin: 25px 0 45px; text-align: center;} .page_0101_5 .b_box_03 .b_more_btn{width: 240px; height: 60px; padding: 0; text-align: center; background-color:#1D1D1F;color:#fff; border:none;box-shadow: none;} .page_0101_5 .b_box_03 .b_more_btn span{ display:block; width:100%; text-align: center;padding:0;} /* .page_0101_5 .b_box_03 .b_more_btn:hover span{transform: translateX(160px); } .page_0101_5 .b_box_03 .b_more_btn:hover figure{transform: translateX(-220px); } .page_0101_5 .b_box_03 .b_more_btn:hover figure img{transform: rotate(0);} */ @media screen and (max-width: 1480px){ .page_0101_5 .b_top_box > div .b_img_box img{max-width: 80%;} .page_0101_5 .b_top_box .b_img_box {margin-right: 0;} } @media screen and (max-width: 1080px){ .page_0101_5 .b_top_box{flex-wrap: wrap;} .page_0101_5 .b_top_box > div {width: 100%; height: 275px;} .page_0101_5 .b_top_box .b_txt_box{padding-right: 0;} .page_0101_5 .b_top_box .b_box_02 .b_txt_box{margin-left: 10%;} .page_0101_5 .b_box_03{background: url(/img/sub/0101/vrware_school_banner01_bg.png) no-repeat center bottom / contain; height: 455px; justify-content: flex-start; padding-top: 40px;} .page_0101_5 .b_box_03 .b_logo_box img{width: 350px;} .page_0101_5 .b_box_03 p {margin: 12px 0 25px;} } @media screen and (max-width: 720px){ .page_0101_5 .b_top_box > div {height: 175px;} .page_0101_5 .b_top_box .b_box_01 .b_img_box img{width: 128px; max-width: unset;} .page_0101_5 .b_top_box .b_box_02 .b_img_box img{width: 107px; max-width: unset;} .page_0101_5 .b_top_box h5 {margin-bottom: 12px;} .page_0101_5 .b_box_01 .b_txt_box {margin-left: 4%;} .page_0101_5 .b_box_01 .b_img_box {margin-left:-9%;} .page_0101_5 .b_box_01 .b_txt_box p{padding: 10px;border: 2px solid rgba(255, 255, 255, .5); border-radius: 5px; margin-bottom: 10px;} .page_0101_5 .b_box_01 .b_txt_box span{font-size: 9px;} .page_0101_5 .b_box_02 .b_more_btn{width: 104px; height: 24.5px; padding: 6px 0;} /* .page_0101_5 .b_box_02 .b_more_btn:hover span{transform: translateX(25px); } .page_0101_5 .b_box_02 .b_more_btn:hover figure{transform: translateX(-77px); } */ .page_0101_5 .b_box_03{height: 348.5px;} .page_0101_5 .b_box_03 .b_logo_box img{width: 230px;} .page_0101_5 .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} .page_0101_5 .b_box_03 .b_more_btn figure {width: 20px;} .page_0101_5 .b_box_03 .b_more_btn figure img{width: 11px;} /* .page_0101_5 .b_box_03 .b_more_btn:hover span{transform: translateX(70px); } .page_0101_5 .b_box_03 .b_more_btn:hover figure{transform: translateX(-108px); } */ } /* 멈춤/재생 버튼 */ .swiper-controls { text-align: right; margin-top: 30px;width: 99%;} #toggle-slide-btn { background-color: #000; color: #fff; border: none; padding: 10px 18px; font-size: 16px; cursor: pointer; border-radius: 30px;} #toggle-slide-btn:hover { background-color: #333;} /*table slide*/ #specs_swiper .swiper-container { width: 100%; height: auto; } #specs_swiper .swiper-slide { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; /* gap:30px; */ padding :0 0 30px; } #specs_swiper .spec_table { width: 80%; border-collapse: collapse; margin: 20px auto; } #specs_swiper .swiper-pagination-bullet{background:#7d61f7!important;width: 12px!important; height: 12px!important;} #specs_swiper .swiper-pagination{position: absolute; bottom: 0%;} .specs_wrap{position: relative;overflow: hidden;} /* -------------------------------------------------------------------------- */ /* page0102 메타웨어 */ .bor_purple{border:1px solid #B56AFF !important;} .bor_purple.c_purple{color:#B56AFF !important;} .page0103_4 .b_inner .b_tit_box .page0102_3 img{width: 75%;} .page_0102_4{background-color: #fff;} .page_0102_4 .b_sub_txt{color:#B56AFF;} .page_0102_4 .b_cont_box{display: flex; align-items: center; max-width: 1360px; margin:0 auto; width:100%; position: relative; justify-content: space-between;} .page_0102_4 .b_img_box{width: 55%; aspect-ratio: 10 / 6;} .page_0102_4 .b_img_box ul{position: relative;} .page_0102_4 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0102_4 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0102_4 .b_img_box li figure img{display: block; max-width: 100%;} .page_0102_4 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0102_4 .b_img_box li.b_img_02 {z-index: 3;} .page_0102_4 .b_txt_box {width: 43%;} .page_0102_4 .b_txt_box li {padding:35px 0px 35px 15px ; border-bottom:1px solid #d9d9d9; } .page_0102_4 .b_txt_box li:last-child{border-bottom: 0;} .page_0102_4 .b_txt_box .b_num{display:inline-block; background-color: #B56AFF30; color:#fff; border-radius: 50px; padding:6px 20px;} .page_0102_4 .b_txt_box .b_cont{margin-top: 25px; color:#8F8F9330; word-break: keep-all;} @media screen and (max-width: 1080px){ .page_0102_4 .b_tit_box{margin-bottom: 50px;} .page_0102_4 .b_txt_box li {padding: 20px 0;} .page_0102_4 .b_txt_box .b_cont {margin-top: 12px;} } @media screen and (max-width: 980px){ .page_0102_4 .b_cont_box{flex-direction: column-reverse; justify-content: center;} .page_0102_4 .b_txt_box {width: 100%; max-width: 560px; height:130px;} .page_0102_4 .b_img_box {width: 100%; max-width: 560px;} .page_0102_4 .b_img_box ul{height: 100%;} .page_0102_4 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0102_4 .b_txt_box ul{height: 100px; position: relative; margin-bottom:10px;} .page_0102_4 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; border-bottom: 0; background-color: #fff; padding: 20px 10px;} .page_0102_4 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0102_4 .b_txt_box li.b_txt_02{z-index: 3;} .page_0102_4 .b_txt_box .b_num{background-color: #B56AFF; color: #fff;} .page_0102_4 .b_txt_box .b_cont{color:#8F8F93;} } @media screen and (max-width: 720px){ .page_0102_4 .b_txt_box .b_num{padding:5px 14px;} .page_0102_4 .b_txt_box .b_cont{margin-top: 10px;} .page_0102_4 .b_txt_box ul{height: 90px; } .page_0102_4 .b_img_box li figure{border-radius: 7.5px;} } .page0102_5 .b_inner .b_tit_box span.b_sub_txt{color:#B56AFF;} .page0102_5 .b_inner .b_cont_box ul{display:flex; flex-flow:row wrap;align-items: center; justify-content: center; gap:20px; } .page0102_5 .b_inner .b_cont_box ul li{width:18%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between;} .page0102_5 .b_inner .b_cont_box ul li figure{width:100%;} .page0102_5 .b_inner .b_cont_box ul li img{width:100%;} @media screen and (max-width:860px) { .page0102_5 .b_inner .b_tit_box figure{display: none;} .page0102_5 .b_inner .b_cont_box ul{ flex-flow:row nowrap; gap:0; justify-content: flex-start; width:100%;} .page0102_5 .b_inner .b_cont_box .swiper-pager{margin-top:30px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;} } .page_0102_f.b_banner_sec{padding:0;width: 100%;} .page_0102_f .b_box_03{background: url(/img/sub/0102/metaware_footer_bg.png) no-repeat bottom center; background-size: 100% auto; height: 800px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:200px; overflow: hidden; background-color:#f5f5f5;} .page_0102_f .b_box_03 p{margin:25px 0 45px; text-align: center;} .page_0102_f .b_box_03 .b_more_btn{width: 240px; height:60px; text-align: center; padding:0; background-color: #1D1D1F; border:0; color: #fff; box-shadow: none; border:none;} .page_0102_f .b_box_03 .b_more_btn span{display: block;width:100%;} @media screen and (max-width: 1023px){ .page_0102_f .b_box_03{height: 455.8px;} /* _en 영문페이지 특정 css */ .page_0102_en.page_0102_f .b_box_03{padding-top:100px;} .page_0102_en.page_0101_2 .b_cont_box .b_box_wrap .b_txt_box_en{aspect-ratio: 9 / 2;} .page_0102_en.page_0102_4 .b_inner .b_cont_box .b_txt_box{height:150px;} } @media screen and (max-width: 720px){ /* _en 영문페이지 특정 css */ .page_0102_en.page0101_4 .swiper-slide .cert_wrap .cert_text .b_cont_txt{margin-top:10px;} .page_0102_en.page_0102_4 .b_inner .b_cont_box .b_txt_box{height:130px;} .page_0102_en.page_0102_f .b_box_03{padding-top:50px;} .page_0102_f .b_box_03{height: 305.8px; padding-top:50px;} .page_0102_f .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } /* -------------------------------------------------------------------------- */ /* page0103 스토리빌더 */ .c_yellow{color:#FFD633;} .bg_yellow{background-color:#FFD633;} .page_0101_1 .b_tit_box .bg_yellow{background-color:#FFD633;} .page_0103_2 .b_txt_box li .b_sub_txt{border:1px solid #FFD633; color:#1D1D1F; margin-bottom:0px;} .page_0103_2 .b_img_box{width:45%;} .page_0103_2 .b_txt_box{width:52%; aspect-ratio: 9 / 5;} .page_0103_2 .b_txt_box ul li{aspect-ratio: 9 / 4; padding-left:10px;} .page_0103_2 .b_txt_box li .b_tit_txt{margin: 15px 0 15px;} @media screen and (max-width:1080px) { .page_0103_2 .b_txt_box li .b_tit_txt{margin: 0px 0 15px;} .page_0103_2 .b_txt_box li .b_sub_txt{margin-bottom:20px;} .page_0103_2 .b_img_box{ width:100%;} .page_0103_2 .b_txt_box{width:100%;aspect-ratio: 9 / 3; } .page_0103_2 .b_txt_box ul li{aspect-ratio: 9 / 3;} } @media screen and (max-width:790px) { /* _en 영문페이지 특정 css */ .page_0103_en .b_txt_box li .b_sub_txt{margin-bottom:10px;} .page_0103_en .b_txt_box{aspect-ratio: 9 / 4;} } @media screen and (max-width:375px){ .page_0103_2 .b_txt_box{width:100%;aspect-ratio: 9 / 5.5;} /* _en 영문페이지 특정 css */ .page_0103_en .b_txt_box{aspect-ratio: 9 / 4;} } /* page_0103_3 페이지 없음 */ .page0103_4 .cert_logo{ height: 100%; padding: 10px 0; background-color:#FFD633 ;} .page0103_4 .cert_logo img {width:auto; max-height: 150px;} .page0103_4 .cert_text {height:150px;} @media screen and (max-width:790px) { .page0103_4 .cert_wrap{height:300px;} .page0103_4 .swiper-controls{ text-align: center;} } .page_0103_5{background-color: #fff;} .page_0103_5 .b_sub_txt{color:#FFD633;} .page_0103_5 .b_cont_box{display: flex; align-items: center; max-width: 1360px; margin:0 auto; width:100%; position: relative; justify-content: space-between;} .page_0103_5 .b_img_box{width: 55%; aspect-ratio: 10 / 6;} .page_0103_5 .b_img_box ul{position: relative;} .page_0103_5 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0103_5 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0103_5 .b_img_box li figure img{display: block; max-width: 100%;} .page_0103_5 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0103_5 .b_img_box li.b_img_02 {z-index: 3;} .page_0103_5 .b_img_box li.b_img_03 {z-index: 5;} .page_0103_5 .b_img_box li.b_img_04 {z-index: 7;} .page_0103_5 .b_img_box li.b_img_05 {z-index: 9;} .page_0103_5 .b_img_box li.b_img_06 {z-index: 11;} .page_0103_5 .b_txt_box {width: 43%;} .page_0103_5 .b_txt_box li {padding:15px 0px 15px 15px ; border-bottom:1px solid #d9d9d9; } .page_0103_5 .b_txt_box li:last-child{border-bottom: 0;} .page_0103_5 .b_txt_box .b_num{display:inline-block; background-color: #FFD63330; color:#fff; border-radius: 50px; padding:6px 20px;} .page_0103_5 .b_txt_box .b_cont{margin-top: 15px; color:#8F8F9330; word-break: keep-all;} .page_0103_5 .b_txt_box li.b_img_01 .b_num{background-color: #FFD633; color:#fff; opacity:1;} .page_0103_5 .b_txt_box li.b_img_01 .b_cont{color:#8F8F93;} /* 하단 배너 */ .page_0103_5.b_banner_sec{padding:0;} .page_0103_5 .b_box_03{background: url(/img/sub/0103/vrware_builder_banner01_bg.png) no-repeat bottom center / contain; height: 800px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:200px; overflow: hidden; background-color:#f5f5f5;} .page_0103_5 .b_box_03 p{margin:25px 0 45px; text-align: center;} .page_0103_5 .b_box_03 .b_more_btn{width: 240px; height:60px; text-align: center; padding:0; background-color: #1D1D1F; border:0; color: #fff; box-shadow: none; border:none;} .page_0103_5 .b_box_03 .b_more_btn span{display: block;width:100%;} /*------------*/ @media screen and (max-width: 1080px){ .page_0103_5 .b_tit_box{margin-bottom: 50px;} .page_0103_5 .b_txt_box li {padding: 20px 0;} .page_0103_5 .b_txt_box .b_cont {margin-top: 12px;} .page_0103_5 .b_box_03{height: 500px;padding-top: 40px;} } @media screen and (max-width: 980px){ .page_0103_5 .b_cont_box{flex-direction: column-reverse; justify-content: center;} .page_0103_5 .b_txt_box {width: 100%; max-width: 560px; height:160px;} .page_0103_5 .b_img_box {width: 100%; max-width: 560px;} .page_0103_5 .b_img_box ul{height: 100%;} .page_0103_5 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0103_5 .b_txt_box ul{height: 100px; position: relative; margin-bottom:10px;} .page_0103_5 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; border-bottom: 0; background-color: #fff; padding: 20px 10px;} .page_0103_5 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0103_5 .b_txt_box li.b_txt_02{z-index: 3;} .page_0103_5 .b_txt_box li.b_txt_03{z-index: 5;} .page_0103_5 .b_txt_box li.b_txt_04{z-index: 7;} .page_0103_5 .b_txt_box .b_num{background-color: #FFD633; color: #fff;} .page_0103_5 .b_txt_box .b_cont{color:#8F8F93;} } @media screen and (max-width: 720px){ .page_0103_5 .b_txt_box .b_num{padding:5px 14px;} .page_0103_5 .b_txt_box .b_cont{margin-top: 10px;} .page_0103_5 .b_txt_box ul{height: 90px; } .page_0103_5 .b_img_box li figure{border-radius: 7.5px;} .page_0103_5 .b_box_03{height: 345.8px;} .page_0103_5 .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } .page0103_6 .b_inner .b_tit_box span.b_sub_txt{color:#FFD633;} .page0103_6 .b_inner .b_cont_box ul{display:flex; flex-flow:row wrap;align-items: center; justify-content: center; gap:25px 15px; } .page0103_6 .b_inner .b_cont_box ul li{width:23%;} .page0103_6 .b_inner .b_cont_box ul li figure{width:100%;} .page0103_6 .b_inner .b_cont_box ul li figure img{width:100%;} .page0103_6 .b_inner .b_cont_box .swiper-pagination-bullet{background:#7d61f7!important;width: 12px!important; height: 12px!important;} @media screen and (max-width:860px) { .page0103_6 .b_inner .b_cont_box ul{ flex-flow:row nowrap; gap:0; justify-content: flex-start; width:100%;} .page0103_6 .b_inner .b_cont_box ul li figure{padding:0 10px;} .page0103_6 .b_inner .b_cont_box .swiper-pager{margin-top:30px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;} } /* sec07 없음 */ /* sec08 css 동일 */ .page0103_9 .b_inner .b_cont_box{display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:10px;} .page0103_9 .b_inner .b_cont_box>figure{width:51%;} .page0103_9 .b_inner .b_cont_box div{width:48%; display:flex; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-start;} .page0103_9 .b_inner .b_cont_box div>figure{padding:10px 0; margin-left:-16px; width:200px;} .page0103_9 .b_inner .b_cont_box div>figure>img{width:100%; height: auto;} .page0103_9 .b_inner .b_cont_box .b_cont_txt{color:#8F8F93;} @media screen and (max-width:790px) { .page0103_9 .b_inner .b_cont_box{flex-flow:column-reverse wrap; align-items: center; justify-content: center;} .page0103_9 .b_inner .b_cont_box figure{width:80%;} .page0103_9 .b_inner .b_cont_box div>figure{margin:0;} .page0103_9 .b_inner .b_cont_box div>figure>img{width:160px;} .page0103_9 .b_inner .b_cont_box>div{width:100%; align-items: center; justify-content: center; text-align: center;} } /* -------------------------------------------------------------------------- */ /* 스토리메이커 */ .bor_red{border:1px solid #ff6633;} .page_0104_2 .b_cont_box .b_txt_box li{padding-left:20px;} .page_0104_2 .b_txt_box span.b_sub_txt{border:1px solid #ff6633; color:#ff6633;margin:0;} @media screen and(max-width:860px) { .page_0104_2 .b_cont_box .b_txt_box li{padding-left:0px;} } .page_0104_3{background-color: #fff;} .page_0104_3 .b_sub_txt{color:#FF6633;} .page_0104_3 .b_cont_box{display: flex; align-items: center; max-width: 1360px; margin:0 auto; width:100%; position: relative; justify-content: space-between;} .page_0104_3 .b_img_box{width: 55%; aspect-ratio: 10 / 6;} .page_0104_3 .b_img_box ul{position: relative;} .page_0104_3 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0104_3 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0104_3 .b_img_box li figure img{display: block; max-width: 100%;} .page_0104_3 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0104_3 .b_img_box li.b_img_02 {z-index: 3;} .page_0104_3 .b_img_box li.b_img_03 {z-index: 5;} .page_0104_3 .b_txt_box {width: 43%;} .page_0104_3 .b_txt_box li {padding:20px 0px 20px 15px ; border-bottom:1px solid #d9d9d9; } .page_0104_3 .b_txt_box li:last-child{border-bottom: 0;} .page_0104_3 .b_txt_box .b_num{display:inline-block; color: #FF663330;padding:6px 0;} .page_0104_3 .b_txt_box .b_cont{margin-top: 15px; color:#8F8F9330; word-break: keep-all;} .page_0104_3 .b_txt_box li.b_img_01 .b_num{ color:#fff; opacity:1;} .page_0104_3 .b_txt_box li.b_img_01 .b_cont{color:#8F8F93;} @media screen and (max-width: 1080px){ .page_0104_3 .b_tit_box{margin-bottom: 50px;} .page_0104_3 .b_txt_box li {padding: 20px 0;} .page_0104_3 .b_txt_box .b_cont {margin-top: 12px;} .page_0104_3 .b_box_03{height: 500px;padding-top: 40px;} } @media screen and (max-width: 980px){ .page_0104_3 .b_cont_box{flex-direction: column-reverse; justify-content: center;} .page_0104_3 .b_txt_box {width: 100%; max-width: 560px; height:120px;} .page_0104_3 .b_img_box {width: 100%; max-width: 560px;} .page_0104_3 .b_img_box ul{height: 100%;} .page_0104_3 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0104_3 .b_txt_box ul{height: 100px; position: relative; margin-bottom:10px;} .page_0104_3 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; border-bottom: 0; background-color: #fff; padding: 20px 10px;} .page_0104_3 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0104_3 .b_txt_box li.b_txt_02{z-index: 3;} .page_0104_3 .b_txt_box li.b_txt_03{z-index: 5;} .page_0104_3 .b_txt_box .b_num{color: #FF6633;} .page_0104_3 .b_txt_box .b_cont{color:#8F8F93;} /* _en 영어 페이지 특정 css */ .page_0104_en.page_0104_3 .b_txt_box {height:160px;} } @media screen and (max-width: 720px){ .page_0104_en.page_0104_3 .b_txt_box {height:140px;} .page_0104_3 .b_txt_box .b_cont{margin-top: 10px;} .page_0104_3 .b_txt_box ul{height: 90px; } .page_0104_3 .b_img_box li figure{border-radius: 7.5px;} .page_0104_3 .b_box_03{height: 345.8px;} .page_0104_3 .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } .page_0104_5 .b_inner .b_tit_box span.b_sub_txt{color:#ff6633;} .page_0104_5 .b_inner .b_cont_box ul li{width:30%;} .page_0104_5 #card_swiper .swiper-pagination-bullet{background:#ff6633!important;width: 12px!important; height: 12px!important;} .page_0104_6 .maker_sec06{margin-top:50px;} .page_0104_6 .maker_sec06 figure{width:40%; max-width:610px;margin: 0 auto;margin-top:20px;} .page_0104_6 .maker_sec06 figure img{width:100%;} .page_0104_6 .specs_wrap{display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:20px;} .page_0104_6 .specs_wrap p.bor_red{margin-bottom:20px; display: inline-block; border-radius: 20px; padding:4px 30px; text-align: center;} .page_0104_6 .specs_wrap>div{width:48%;} .page_0104_6 .specs_wrap #card_swiper{overflow: hidden; } .page_0104_6 .specs_wrap .swiper-slide{width:50%;} .page_0104_6 #card_swiper .swiper-pager{margin-top:20px;} .page_0104_6 #card_swiper .swiper-pagination-bullet{background:#ff6633!important;width: 12px!important; height: 12px!important;} /* _en 영어페이지 특정 css */ .page_0104_en .swiper-wrapper li .cert_wrap .cert_text .b_cont_txt{margin-top:10px;} @media screen and (max-width:860px) { .page_0104_6 .specs_wrap {flex-flow: column nowrap;} .page_0104_6 .specs_wrap>div {width:100%;} .page_0104_6 .specs_wrap .swiper-slide {width:100%;} .page_0104_6 .maker_sec06 figure{width: 80%;} } @media screen and (max-width: 720px) { .page_0104_6 .maker_sec06 figure{width:100%;} } .page_0104_f.b_banner_sec{padding:0;width: 100%;} .page_0104_f .b_box_03{background: url(/img/sub/0104/storymaker_footer_bg.png) no-repeat bottom center; background-size: 100% auto; height: 800px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:200px; overflow: hidden; background-color:#f5f5f5;} .page_0104_f .b_box_03 p{margin:25px 0 45px; text-align: center;} .page_0104_f .b_box_03 .b_more_btn{width: 240px; height:60px; text-align: center; padding:0; background-color: #1D1D1F; border:0; color: #fff; box-shadow: none; border:none;} .page_0104_f .b_box_03 .b_more_btn span{display: block; width:100%;} @media screen and (max-width: 720px){ /* _en 영어페이지 특정 css */ .page_0104_en.page0101_4 .swiper-slide .cert_wrap .cert_text .b_cont_txt{margin-top:10px;} .page_0104_f .b_box_03{height: 345.8px; padding-top:40px;} .page_0104_f .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } /* -------------------------------------------------------------------------- */ /* 북클럽 */ .c_mint{color:#77DDD4 !important;} .c_orange{color:#FF6A00 !important;} .c_yellow2{color:#FFBB00 !important;} .c_black{color:#453939 !important;} .bor_mint{border:1px solid #77DDD4 !important;} .bg_yellow2{background-color: #FFBB00 !important;} .page_0101_2 .b_box_wrap.book02{flex-flow: row nowrap;} @media screen and (max-width:1080px) { .page_0101_2 .b_box_wrap.book02{flex-flow: column-reverse nowrap;} .page_0101_2 .b_box_wrap.book02 .b_txt_box{aspect-ratio:9 / 2;} .page_0101_2 .b_box_wrap.book02 .b_txt_box ul li{aspect-ratio:9 / 2;} .page_0101_2 .b_box_wrap.book02 .b_img_box,.page_0101_2 .b_box_wrap.book02 .b_img_box ul li,.page_0101_2 .b_box_wrap.book02 .b_txt_box{width:100%;} } @media screen and (max-width:375px) { .page_0103_2 .b_inner .b_cont_box .b_box_wrap.book02 .b_txt_box{aspect-ratio: 9 /3;} } .page_0105_3{background:url(/img/sub/0105/bookclub_sec03_bg.png) no-repeat center; background-size: 100% 100%;} .page_0105_3 .b_cont_txt{color:#8F8F93; font-weight: 600; margin-bottom:20px;} .page_0105_3 .b_cont_box{ display: flex;max-width: 1300px; margin: 0 auto; width: 100%; position: relative; justify-content: center; align-items: flex-start; gap:20px;height: 680px;} .page_0105_3 .b_img_box{width: 45%; aspect-ratio: 10 / 6;} .page_0105_3 .b_img_box ul{position: relative;} .page_0105_3 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0105_3 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0105_3 .b_img_box li figure img{display: block; max-width: 100%; margin:0 auto;} .page_0105_3 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0105_3 .b_img_box li.b_img_02 {z-index: 3;} .page_0105_3 .b_img_box li.b_img_03 {z-index: 5;} .page_0105_3 .b_img_box li.b_img_04 {z-index: 7;} .page_0105_3 .b_txt_box {width: 52%;} .page_0105_3 .b_txt_box li {padding:30px 0; border-bottom:1px solid #d9d9d9; } .page_0105_3 .b_txt_box li:last-child{border-bottom: 0;} .page_0105_3 .b_txt_box li p{word-break: keep-all;} .page_0105_3 .b_txt_box .b_num{color: #d9d9d9;} .page_0105_3 .b_txt_box .b_cont{margin-top: 20px; color: #d9d9d9;} @media screen and (max-height:800px){ .page_0105_3 .b_tit_box{margin-bottom: 40px;} } @media screen and (max-width: 1080px){ .page_0105_3 .b_tit_box{margin-bottom: 50px;} .page_0105_3 .b_txt_box li {padding: 20px 0;} .page_0105_3 .b_txt_box .b_cont {margin-top: 12px;} } @media screen and (max-width: 980px){ .page_0105_3 .b_cont_box{flex-direction: column-reverse; align-items: center; justify-content: flex-end; height:580px;} .page_0105_3 .b_txt_box {width: 100%; max-width: 560px;} .page_0105_3 .b_img_box {width: 100%; max-width: 560px;} .page_0105_3 .b_img_box ul{height: 100%;} .page_0105_3 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0105_3 .b_txt_box ul{height: 100px; position: relative; } .page_0105_3 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; border-bottom: 0; background-color: #fff; padding: 0 10px;} .page_0105_3 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0105_3 .b_txt_box li.b_txt_02{z-index: 3;} .page_0105_3 .b_txt_box li.b_txt_03{z-index: 5;} .page_0105_3 .b_txt_box li.b_txt_04{z-index: 7;} .page_0105_3 .b_txt_01 .b_num{color:#FF6A00;} .page_0105_3 .b_txt_02 .b_num{color:#FFBB00;} .page_0105_3 .b_txt_03 .b_num{color: #8BE7DF;} .page_0105_3 .b_txt_04 .b_num{color: #453939;} .page_0105_3 .b_txt_box .b_cont{color: #1D1D1F;} } @media screen and (max-width: 720px){ .page_0105_3{background-size: auto 100%;padding-top: 150px; padding-bottom:50px;} .page_0105_3 .b_img_box li figure{border-radius: 7.5px;} } .page_0105_4 {background:url(/img/sub/0105/bookclub_sec04_bg.png) no-repeat center; background-size:100% 100%;} .page_0105_4 .b_inner .b_tit_box span.b_sub_txt{color:#fff;} .page_0105_4 .b_inner .b_tit_box h3{color:#453939;} .page_0105_4 .b_inner .b_cont_box ul{display:flex; flex-flow:row wrap;align-items: center; justify-content: center; gap:0px; } .page_0105_4 .b_inner .b_cont_box ul li{width:32%;} .page_0105_4 .b_inner .b_cont_box ul li>div{box-shadow:none; width:90%; margin: 0 auto; border-radius: 20px; height:400px; padding:40px; background-color:#FFF0C8; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between;} .page_0105_4 .b_inner .b_cont_box ul li p{text-align: left; width: 100%; color:#453939; word-break: keep-all;} .page_0105_4 .b_inner .b_cont_box ul li p.line_4{margin:10px auto;} .page_0105_4 .b_inner .b_cont_box ul li>div>div{display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;} .page_0105_4 .b_inner .b_cont_box ul li>div img{width:100px; height:auto;} .page_0105_4 .b_inner .b_cont_box ul li .book_reviewer{box-shadow: none; width:100%; height:fit-content; display: flex; flex-flow: row nowrap; align-items: baseline; justify-content: space-between;} @media screen and (max-width:1400px) { .page_0105_4 .b_inner .b_cont_box ul{flex-flow:column nowrap; width:100%; margin:0 auto;} .page_0105_4 .b_inner .b_cont_box ul li{width:600px; min-height:300px;} .page_0105_4 .b_inner .b_cont_box ul li>div{height:280px; padding:30px;} .page_0105_4 .b_inner .b_cont_box ul li>div img{width:60px; height:auto;} } @media screen and (max-width:860px) { .page_0105_4 {background:url(/img/sub/0105/bookclub_sec04_bg.png) no-repeat center; background-size:auto 100%;} .page_0105_4 .b_inner .b_cont_box{ overflow: hidden; padding-top:20px; } .page_0105_4 .b_inner .b_cont_box .swiper-pager{ display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; margin-top:30px;} .page_0105_4 .b_inner .b_cont_box ul{ flex-flow:row nowrap; gap:0; justify-content: flex-start; width:100%;} .page_0105_4 .b_inner .b_cont_box ul li{width:100%; height: 100%;} .page_0105_4 .b_inner .b_cont_box .swiper-pagination-bullet{background:#FF6A00!important;width: 12px!important; height: 12px!important;} } .page_0105_f.b_banner_sec{padding:0;width: 100%;} .page_0105_f .b_box_03{background: url(/img/sub/0105/bookclub_banner01_bg.png) no-repeat bottom center; background-size: 100% auto; height: 800px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:200px; overflow: hidden; background-color:#f5f5f5;} .page_0105_f .b_box_03 p{margin:25px 0 45px; text-align: center;} .page_0105_f .b_box_03 .b_more_btn{width: 240px; height:60px; text-align: center; padding:0; background-color: #1D1D1F; border:0; color: #fff; box-shadow: none; border:none;} .page_0105_f .b_box_03 .b_more_btn span{display: block;width:100%;} @media screen and (max-width: 1024px){ .page_0105_f .b_box_03{height: 455.8px; padding-top:100px;} .page_0105_f.page_0105_en .b_box_03{padding-top:100px;} } @media screen and (max-width: 720px){ .page_0105_f .b_box_03,.page_0105_f.page_0105_en .b_box_03{height: 305.8px; padding-top:50px;} .page_0105_f .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } /* -------------------------------------------------------------------------- */ /* 어셈블러 */ .c_pink{color:#D81A62 !important;} .bg_pink{background-color: #D81A62 !important;} .bor_pink{border:1px solid #D81A62 !important;} .page_0104_2 .b_inner .b_cont_box .page0106_1 li{padding-left:10px;} .page0106_3 .b_inner .certi_container .cert_logo{height:160px;} .page0106_3 .b_inner .certi_container .cert_text{height:160px;} /* _en 영문페이지 특정 css */ .page0103_4.page_0106_en .b_inner .certi_container .cert_wrap .cert_text{height:190px;} .page0103_4.page_0106_en .b_inner .certi_container .cert_wrap .cert_text .b_cont_txt{margin-top:10px;} @media screen and (max-width:860px) { .page0106_3 .b_inner .certi_container .cert_logo{height:80%;} } @media screen and (max-width:430px) { .page0106_3 .b_inner .certi_container .cert_wrap{height:260px;} /* _en 영문페이지 특정 css */ .page0103_4.page_0106_en .b_inner .certi_container .cert_wrap .cert_text{height:200px;} .page_0101_2.page_0106_en .b_txt_box ul{min-height:160px;} } .page_0106_4{background-color: #fff;} .page_0106_4 .b_sub_txt{color:#D81A62;} .page_0106_4 .b_cont_box{display: flex; align-items: center; max-width: 1360px; margin:0 auto; width:100%; position: relative; justify-content: space-between;} .page_0106_4 .b_img_box{width: 48%; aspect-ratio: 10 / 6;} .page_0106_4 .b_img_box ul{position: relative;} .page_0106_4 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0106_4 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0106_4 .b_img_box li figure img{display: block; max-width: 100%;} .page_0106_4 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0106_4 .b_img_box li.b_img_02 {z-index: 3;} .page_0106_4 .b_img_box li.b_img_03 {z-index: 5;} .page_0106_4 .b_txt_box {width: 50%;} .page_0106_4 .b_txt_box li {padding:20px 0px 20px 15px ; border-bottom:1px solid #d9d9d9; } .page_0106_4 .b_txt_box li:last-child{border-bottom: 0;} .page_0106_4 .b_txt_box .b_num{display:inline-block; color: #D81A6230;padding:6px 0;} .page_0106_4 .b_txt_box .b_cont{margin-top: 15px; color:#8F8F9330; word-break: keep-all;} .page_0106_4 .b_txt_box li.b_img_01 .b_num{color:#D81A6230; opacity:1;} .page_0106_4 .b_txt_box li.b_img_01 .b_cont{color:#8F8F93;} .page_0106_4 .b_inner .b_cont_box .b_txt_box .b_tit{margin-left:10px; color:#1D1D1F30;} .page_0106_4 .b_inner .b_cont_box .b_txt_box .b_txt_03 .b_cont{margin-top:5px;} .page_0106_4 .b_inner .b_cont_box .b_txt_box .b_txt_03 .b_cont::before{content:"-"; margin-right:10px;} @media screen and (max-width: 1080px){ .page_0106_4 .b_tit_box{margin-bottom: 50px;} .page_0106_4 .b_txt_box li {padding: 20px 0;} .page_0106_4 .b_txt_box .b_cont {margin-top: 12px;} .page_0106_4 .b_box_03{height: 500px;padding-top: 40px;} } @media screen and (max-width: 980px){ .page_0106_4 .b_cont_box{flex-direction: column-reverse; justify-content: center;} .page_0106_4 .b_txt_box {width: 100%; max-width: 560px; height:160px;} .page_0106_en.page_0106_4 .b_cont_box .b_txt_box {height:235px;} .page_0106_4 .b_img_box {width: 100%; max-width: 560px;} .page_0106_4 .b_img_box ul{height: 100%;} .page_0106_4 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0106_4 .b_txt_box ul{height: 100px; position: relative; margin-bottom:10px;} .page_0106_4 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; border-bottom: 0; background-color: #fff; padding: 20px 10px;} .page_0106_4 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0106_4 .b_txt_box li.b_txt_02{z-index: 3;} .page_0106_4 .b_txt_box li.b_txt_03{z-index: 5;} .page_0106_4 .b_inner .b_cont_box .b_txt_box .b_tit{color:#1D1D1F;} .page_0106_4 .b_txt_box .b_num{color: #D81A62;} .page_0106_4 .b_txt_box .b_cont{color:#8F8F93;} } @media screen and (max-width: 720px){ .page_0106_4 .b_txt_box .b_cont{margin-top: 10px;} .page_0106_4 .b_txt_box ul{height: 90px; } .page_0106_4 .b_img_box li figure{border-radius: 7.5px;} .page_0106_4 .b_box_03{height: 345.8px;} .page_0106_4 .b_inner .b_cont_box .b_txt_box .b_tit{margin-left:0;} .page_0106_4 .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } .page_0106_5{padding-top:150px;} .page_0106_5 video{width:90%; max-width:1000px; aspect-ratio:inherit; margin:0 auto;border-radius: 20px; overflow: hidden;} @media screen and (max-width: 720px){ .page_0106_5{padding-top:100px;} } .page0106_6 .b_inner .b_cont_box{gap:30px;} .page0106_6 .b_inner .b_cont_box>figure{width:48%; text-align: right;} .page0106_6 .b_inner .b_cont_box>figure>img{width:80%; margin:0 auto;} .page_0106_f.b_banner_sec{padding:0;width: 100%;} .page_0106_f .b_box_03{background: url(/img/sub/0106/assem_footer_bg.png) no-repeat bottom center; background-size: 100% auto; height: 800px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:160px; overflow: hidden; background-color:#f5f5f5;} .page_0106_f .b_box_03 p{margin:25px 0 45px; text-align: center;} .page_0106_f .b_box_03 .b_more_btn{width: 240px; height:60px; text-align: center; padding:0; background-color: #1D1D1F; border:0; color: #fff; box-shadow: none; border:none;} .page_0106_f .b_box_03 .b_more_btn span{display: block; width:100%;} @media screen and (max-width: 720px){ .page0106_6 .b_inner .b_cont_box>figure{width:48%; text-align:center;} .page_0106_f .b_box_03{height: 345.8px; padding-top:40px;} .page_0106_f .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } /* -------------------------------------------------------------------------- */ /*게시판*/ .b_board_sec { margin: 0 auto; max-width: 1520px;width:94%;} /* 게시물 제목 우측 하트 없애기 */ #bo_list .bo_tit .fa-heart{display:none;} /*준비중*/ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; gap: 20px;} .center-lo { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 400px; margin-bottom: 40px;} .loging {display: flex; justify-content: space-between; width: 180px;height: 100px; position: relative;} .loging div { background: blue; width: 20px; height: 20px; border-radius: 50%; animation: loding 2s infinite;} #load1 { animation-delay: 0s;} #load2 {animation-delay: 0.2s;} #load3 { animation-delay: 0.4s;} #load4 { animation-delay: 0.6s;} #load5 { animation-delay: 0.8s;} @keyframes loding { 0% { transform: translateY(0); background: blue; } 50% { transform: translateY(70px); background: red; opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; } } /*page0101*/ .table_wrap { overflow-x: auto; max-width: 1000px; margin: 0 auto;} .spec_table { width: 100%; border-collapse: collapse; text-align: left; margin: 0 auto; background-color: #fff; } .spec_table thead th { background-color: #fff7d9; color: #ffba00; font-weight: bold; padding: 20px; border: 1px solid #ffd700; } .spec_table tbody td { padding: 20px; border: 1px solid #ffd700; } .spec_table tr td:first-child{font-weight: 600;} .spec_table tr td:last-child ,.spec_table tr th:last-child { text-align: center; } /* -------------------커뮤니티 > 다운로드 ----------------------*/ .b_sub_sec.b_board_sec{padding-top:100px; padding-bottom:250px;} /* 다운로드 섹션 배경 및 패딩 */ .page_dl_01 { background-color: #f5f5f5; padding: 100px 0 150px; } .page_dl_01 ul{ width: 94%; max-width: 1520px; margin: 0 auto; display: grid; grid-template-rows: 1fr 0fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 35px 15px; } .page_dl_01 ul li .item_box{display: flex; flex-flow:column nowrap; width:100%; min-width:410px; height:300px; justify-content: space-between;gap:10px; background-color: #fff; border-radius: 10px; padding:30px 20px; box-shadow: 0 3px 15px 1px #00000010; position:relative; z-index: 1;} .page_dl_01 ul li .p_name_box{display: flex; flex-flow:row nowrap; align-items: center; justify-content: space-between;} .page_dl_01 ul li .p_name_box .p_name{display: flex; flex-flow:row nowrap; align-items: center; justify-content: flex-start; gap:10px;} .page_dl_01 ul li .p_name_box .p_name img{width:35px; height:auto; aspect-ratio: 1 / 1;} .page_dl_01 ul li .p_name_box .info_btn{ width:30px; cursor:pointer; height:auto; aspect-ratio: 1 / 1;} .page_dl_01 ul li .p_name_box .info_btn path{transition: all 0.3s;} .page_dl_01 ul li .p_name_box .info_btn:hover path{stroke:#1D1D1F;} .page_dl_01 ul li .cont_txt{color:#8F8F93; margin-top:15px;} .page_dl_01 ul li .more_txt{display:block; margin-top:25px;} .page_dl_01 ul li .more_txt.c_green{color:#50B507;} .page_dl_01 ul li .p_bot{display: flex; flex-flow:row nowrap; align-items: flex-end; justify-content: space-between;} .page_dl_01 ul li .p_bot .icon_wrap{display: flex; flex-flow:row nowrap; align-items: center; justify-content: flex-start; gap:20px;} .page_dl_01 ul li .p_bot .icon_wrap .icon_box{display: flex; flex-flow:column nowrap; align-items: center; justify-content: center;gap:5px;} .page_dl_01 ul li .p_bot .icon_wrap .icon_box img{height:35px; width:auto;} .page_dl_01 ul li .p_bot .icon_wrap .icon_box p{text-align: center;} .page_dl_01 ul li .p_bot .btn_wrap{display: flex; flex-flow:row nowrap; align-items: center; justify-content: flex-end; gap:10px;} .page_dl_01 ul li .p_bot .btn_wrap_able{flex-flow: row wrap; justify-content: end;} .page_dl_01 ul li .p_bot .btn_wrap_able .blank_box{width:150px; visibility:hidden;} .page_dl_01 ul li .p_bot .btn_wrap a{opacity:1;display: block; transition:all 0.3s; padding:8px 0; text-align: center;} .page_dl_01 ul li .p_bot .btn_wrap a.menual_btn{width:68px;border-radius:5px;background-color:#D9D9D9;} .page_dl_01 ul li .p_bot .btn_wrap a.dl_btn{width:110px;border-radius:5px;background-color:#fff; border:1px solid #1D1D1F;} .page_dl_01 ul li .plan_btn{ cursor:pointer; box-shadow: 0 3px 15px 1px #00000010; transition:all 0.2s ease-out; display:flex; justify-content: center; margin-top:-10px; position:relative; z-index: 0; padding:25px 10px 15px 10px; color:#fff; width:100%; border-radius: 0 0 10px 10px;} .page_dl_01 ul li .plan_btn:hover{filter: brightness(1.06);} .page_dl_01 ul li .plan_btn p>span{margin-left:5px;} .page_dl_01 ul li.banner{ background-color:#F6FFE9; border-radius: 10px; padding:0 5%; grid-column:1/ 4;grid-row: 2 / 3; position: relative; color:#1d1d1f; width:100%; height:200px; display:flex;flex-flow:row nowrap;align-items: center; justify-content: flex-start; gap:5%;} .page_dl_01 ul li.banner .bnr_logo{width:200px; height:auto;} .page_dl_01 ul li.banner a{padding:10px 25px; border-radius: 50px; transition:all 0.4s ease-in-out; background-color: #1D1D1F; color:#fff;} .page_dl_01 ul li.banner a:hover{background-color:#29CC39;color:#1d1d1f;} .page_dl_01 ul li.banner .bnr_bg{height:fit-content; position:absolute; bottom:0; right:0;} .page_dl_01 ul li.banner .bnr_bg img{width:600px;height:fit-content;} .page_dl_01 ul li.h_blue .plan_btn{background-color:#28BFFF;} .page_dl_01 ul li.h_blue .plan_btn p>span{color:#004FFA;} .page_dl_01 ul li.h_purple .plan_btn{background-color:#B56AFF;} .page_dl_01 ul li.h_purple .plan_btn p>span{color:#480459;} .page_dl_01 ul li.h_yellow .plan_btn{background-color:#FFCC00;} .page_dl_01 ul li.h_yellow .plan_btn p>span{color:#E2890C;} .page_dl_01 ul li.h_orange .plan_btn{background-color:#FF6633;} .page_dl_01 ul li.h_orange .plan_btn p>span{color:#6B2309;} .page_dl_01 ul li.h_pink .plan_btn{background-color:#D71A63;} .page_dl_01 ul li.h_pink .plan_btn p>span{color:#F7BE2D;} .page_dl_01 ul li.h_green .plan_btn{background-color:#50B507;} .page_dl_01 ul li.h_green .plan_btn p>span{color:#085836;} .page_dl_01 ul li.h_teal .plan_btn{background-color:#29C5BB;} .page_dl_01 ul li.h_teal .plan_btn p>span{color:#8A61EA;} /* pc에서만 hover 동작하게 하기 */ @media (hover: hover) { .page_dl_01 ul li.h_blue .p_bot .btn_wrap .menual_btn:hover{background-color:#28BFFF;} .page_dl_01 ul li.h_blue .p_bot .btn_wrap .dl_btn:hover{background-color:#28BFFF30;} .page_dl_01 ul li.h_purple .p_bot .btn_wrap .menual_btn:hover{background-color:#B56AFF;} .page_dl_01 ul li.h_purple .p_bot .btn_wrap .dl_btn:hover{background-color:#B56AFF30;} .page_dl_01 ul li.h_yellow .p_bot .btn_wrap .menual_btn:hover{background-color:#FFCC00;} .page_dl_01 ul li.h_yellow .p_bot .btn_wrap .dl_btn:hover{background-color:#FFCC0030;} .page_dl_01 ul li.h_orange .p_bot .btn_wrap .menual_btn:hover{background-color:#FF6633;} .page_dl_01 ul li.h_orange .p_bot .btn_wrap .dl_btn:hover{background-color:#FF663330;} .page_dl_01 ul li.h_pink .p_bot .btn_wrap .menual_btn:hover{background-color:#D71A63;} .page_dl_01 ul li.h_pink .p_bot .btn_wrap .dl_btn:hover{background-color:#D71A6330;} .page_dl_01 ul li.h_teal .p_bot .btn_wrap .menual_btn:hover{background-color:#29C5BB;} .page_dl_01 ul li.h_teal .p_bot .btn_wrap .dl_btn:hover{background-color:#29C5BB30;} .page_dl_01 ul li.h_green .p_bot .btn_wrap .menual_btn:hover{background-color:#50B507;} .page_dl_01 ul li.h_green .p_bot .btn_wrap .dl_btn:hover{background-color:#50B50730;} } .page_dl_01 ul li .p_bot a.icon_box.only_pc{display: flex;} .page_dl_01 ul li .p_bot a.icon_box.only_mo{display: none;} .page_dl_01 ul li .p_bot a.only_pc{display: block;} .page_dl_01 ul li .p_bot a.only_mo{display: none;} .page_dl_01 ul li .p_bot a.mo_unable{opacity: 0.3;} /* --------페이지 내 팝업 CSS------ */ .popup{display:none; width:100vw; height:100vh; position:fixed; top:0; left:0; background-color: #1D1D1F30; backdrop-filter: blur(3px); z-index: 6;} .popup_cont{width:900px; height:660px; position:relative; border-radius: 20px; box-shadow: 0 3px 15px 3px #00000020; padding:50px 40px; background-color:#fff; position:absolute; top:calc(50% + 25px);left:50%; transform: translate(-50%,-50%); text-align:center; z-index:5;} .popup_cont .popup_close{position:absolute; top:30px; right:30px;cursor:pointer;} .popup_cont .popup_close:hover path{transition: all 0.3s; fill:#1D1D1F;} .popup_cont ul{width:100%; margin-top:30px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap:15px;position:relative;} .popup_cont ul li{display:flex; flex-flow:column nowrap; gap: 20px; align-items: center; justify-content: center;} .popup_cont ul li p.popup_tab{cursor:pointer;border-radius: 50px; color:#fff; padding:6px; width:160px;} .popup_cont ul li p.popup_tab.bg_gray{background-color: #D9D9D9 !important;} .popup_cont ul li p.popup_tab.bg_blue{background-color: #28BFFF;} .popup_cont ul li p.popup_tab.bg_orange{background-color: #FF6633;} .popup_1 p.popup_tab.on{background-color: #28BFFF;} .popup_2 p.popup_tab.on{background-color: #B56AFF;} .popup_3 p.popup_tab.on{background-color: #FFCC00;} .popup_4 p.popup_tab.on{background-color: #FF6633;} .popup_5 p.popup_tab.on{background-color: #D71A63;} .popup_6 p.popup_tab.on{background-color: #50B507;} .popup_7 p.popup_tab.on{background-color: #0AB6AD;} .popup_cont ul li table{width:820px; position: absolute; top:50px; left:50%; transform: translateX(-50%); visibility: hidden;} .popup_cont ul li table.on{visibility: visible;} .popup_cont ul li table tr td{padding:8px 0;} .popup_cont ul li table tr td:first-child{width:200px;} .popup_cont ul li table thead tr{background-color:#8F8F93; color:#fff;} .popup_cont ul li table thead tr td:first-child{border-radius: 5px 0 0 5px;} .popup_cont ul li table thead tr td:last-child{border-radius: 0 5px 5px 0;} .popup_cont ul li table thead tr td:first-child p{border-right:1px solid #fff;} .popup_cont ul li table thead tr td:last-child p{border-left:1px solid #fff;} .popup_cont ul li table tbody tr td p{background-color:#F0F0F0; color:#1D1D1F;padding:14px 0;} .popup_cont ul li table tbody tr:last-child td span.fw_m{color:#8F8F93; text-align: left;} .popup_cont ul li table tbody tr:first-child td{padding-top:12px;} .popup_cont ul li table tbody tr td:first-child p{border-radius: 5px 0 0 5px;} .popup_cont ul li table tbody tr td:first-child p.line_40px{line-height:40px;} .popup_cont ul li table tbody tr td:last-child p{border-radius: 0 5px 5px 0;} .popup_cont ul li table tbody tr td:last-child p span{display: block; border-left:1px solid #8F8F93;} .popup_8 .popup_cont{width:500px; height:300px; position:relative; border-radius: 20px; box-shadow: 0 3px 15px 3px #00000020; padding:50px 40px; background-color:#fff; position:absolute; top:50%;left:50%; transform: translate(-50%,-50%); text-align:center;} .popup_8 .popup_cont>p{padding:60px 0; font-size:20px; line-height: 1.4em; font-weight: 500;} @media screen and (max-width:1630px) { .page_dl_01 ul{width:100%; margin:0 auto; } .page_dl_01 ul li{width:100%;} } @media screen and (max-width:1320px) { .page_dl_01 ul{grid-template-columns: 1fr 1fr;} .page_dl_01 ul li.banner{flex-flow:column; gap:5%; padding: 5% 0; height:100%; grid-column: auto; grid-row: auto;} .page_dl_01 ul li.banner .bnr_logo{width:140px;} .page_dl_01 ul li.banner p{text-align: center;} .page_dl_01 ul li.banner .bnr_bg img{width:400px;} } @media screen and (max-width:1080px) { .page_dl_01 ul li .p_name_box .info_btn{display: none;} } @media screen and (max-width:890px) { .page_dl_01 ul{grid-template-columns: 1fr;} .page_dl_01 ul li.banner{gap:10%; padding: 7% 0;} .page_dl_01 ul li.banner .bnr_bg img{width:500px;} } @media screen and (max-width:720px) { .b_sub_sec.b_board_sec{padding-top:30px; padding-bottom:200px;} .page_dl_01 ul li{height:fit-content;} .page_dl_01 ul li .item_box{min-width:0; padding: 20px;} .page_dl_01 ul li .p_name_box .p_name .title{font-size: 16px;} .page_dl_01 ul li .cont_txt{font-size: 12px;} .page_dl_01 ul li .more_txt{margin-top:10px; width:100%; text-align: right; font-size: 12px;} .page_dl_01 ul li .p_bot .icon_wrap{gap:15px;} .page_dl_01 ul li .p_bot .icon_wrap .icon_box img{height:25px;} .page_dl_01 ul li .p_bot .icon_wrap .icon_box p{font-size: 12px;} .page_dl_01 ul li .p_bot{flex-flow:column nowrap; align-items: flex-start; gap:10px;} .page_dl_01 ul li .p_bot .btn_wrap{width:100%;} .page_dl_01 ul li .p_bot .btn_wrap a{flex:0.5; font-size:14px; transition: none;} .page_dl_01 ul li .p_bot a.icon_box.only_pc{display: none;} .page_dl_01 ul li .p_bot a.icon_box.only_mo{display: flex;} .page_dl_01 ul li .p_bot a.only_pc{display: none;} .page_dl_01 ul li .p_bot a.only_mo{display: block;} .page_dl_01 ul li .p_bot a.unable{opacity: 0.3; cursor: not-allowed;} .page_dl_01 ul li .p_bot .btn_wrap_able .blank_box{display:none;} .page_dl_01 ul li .p_bot .btn_wrap a.mo_menual{background-color:#D9D9D9;border:none;} .page_dl_01 ul li .p_bot .btn_wrap a.mo_dl{background-color:#fff; border:1px solid #1D1D1F;} .page_dl_01 ul li .plan_btn p{font-size: 12px;} .page_dl_01 ul li .plan_btn p>span{font-size:14px;} .page_dl_01 ul li.banner .bnr_bg img{width:350px;} .page_dl_01 ul li.banner p{font-size: 16px;} .page_dl_01 ul li.banner a{font-size:14px; padding:8px 20px;} .popup_8 .popup_cont{width:300px; height:200px;} .popup_8 .popup_cont>p{padding:20px 0; font-size: 16px;} } /*-------------------------------------------------------------------------------------*/ .b_sv_box_my{border-bottom:none;} .b_sv_box_my .b_inner{display: flex; flex-flow:column nowrap; justify-content: center; gap:30px;} .b_sv_box_my .b_inner .b_navi_box{width:fit-content; margin:0 auto;} .b_sv_box_my .b_inner .b_navi_box ul{width:fit-content; padding:5px 5px; display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; background-color: #fff; border-radius: 50px; margin-bottom:20px;} .b_sv_box_my .b_inner .b_navi_box ul li a{display:block; color:#1D1D1F; border-radius: 20px; width:140px; background-color: #fff; padding:10px 0;} .b_sv_box_my .b_inner .b_navi_box ul li.on a{background-color:#1D1D1F;color:#fff; } .b_sv_box_my .b_inner .greet_box{display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:16px;} .b_sv_box_my .b_inner .greet_box img{width:40px; height:auto;} .b_sv_box_my .b_inner .greet_box p{color:#6B6B6B;} @media screen and (max-width:1440px) { .b_sv_box_my .b_inner .b_navi_box{display: block;} } @media screen and (max-width:1024px) { .b_sv_box_my .b_inner{gap:20px;} .b_sv_box_my .b_inner .b_navi_box{display: block;} .b_sv_box_my .b_inner .greet_box img{width:24px;} } @media screen and (max-width:830px) { } @media screen and (max-width:768px){ .b_sv_box_my .b_inner h2{margin-bottom:20px;} .b_sv_box_my .b_inner .b_navi_box ul{width: fit-content; padding:3px 3px;} .b_sv_box_my .b_inner .b_navi_box ul li a{width:90px; padding:8px 0;} } @media screen and (max-width:430px){ } .mypage_cont{padding-top:0px; margin-bottom:300px;} .mypage_cont>div{margin-bottom:120px; display: flex; flex-flow:column nowrap; align-items: center; justify-content: flex-start; gap:40px;} .inner_cont{width: 80%; max-width: 1400px; margin:0 auto; } .licen_code .licen_input{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap:5px;} .licen_code .licen_input input, .licen_code .licen_input button{border-radius: 10px; padding:15px 20px; outline:none;} .licen_code .licen_input input{border:1px solid #000000; width:400px; } .licen_code .licen_input input::placeholder{color:#CCCCCC;} .licen_code .licen_input button{ width:150px; background-color: #000000; color:#fff; text-align: center;} .my_license>ul{justify-content: flex-start;display: flex; flex-flow:row wrap; align-items: center; gap:20px 20px;} .my_license>ul>li{position:relative; width:48%; min-width:500px; height:250px; border-radius: 10px; padding:35px 30px; box-shadow: 0 3px 15px 1px #00000010; background-color: #fff; border-radius:20px ;display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap:20px;} .my_license ul li .licen_img_box{border-radius: 100px; aspect-ratio: 1 / 1; width: 100px; height:100px; position:relative;} .my_license ul li .licen_img_box>img{width: 50%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);} .my_license ul li .license_info{width: 100%;height: 100%; display: flex; flex-flow: column; justify-content: space-between;} .my_license ul li .license_info .row_flex{display: flex; flex-flow:row nowrap; justify-content: space-between; align-items: flex-start;} .my_license ul li .license_info .row_flex .licen_btn{border-radius: 100px; cursor:pointer; width:100px; text-align: center; padding:8px 0;} .my_license ul li .license_info .row_flex.d_day{align-items: flex-end;} .my_license ul li .license_info .row_flex span.fs_14{color:#949494;margin-top:8px;} /* 라이선스 남은 기간이 적을 때 caution 클래스 */ .d_day_txt.caution::before{position:absolute; top:0; left:-20px; transform: translate(-50%,-50%); background: url(/img/sub/mypage/caution-bubble.png) no-repeat 0px 0px; background-size: cover; content: ""; display: inline-block; height: 25px; width: 25px;} .caution{color:#FF1924; position:relative;} /* 라이선스별 색 지정 */ .my_license ul li.blue .colored{color:#6AC7FA;} .my_license ul li.blue .licen_img_box{background-color:#6AC7FA;} .my_license ul li.blue .licen_btn{background-color:#E0F4FF; border:1px solid #6ac7fa;} .my_license ul li.violet .colored{color:#B56AFF;} .my_license ul li.violet .licen_img_box{background-color:#B56AFF;} .my_license ul li.violet .licen_btn{background-color:#FDEDFF; border:1px solid #B56AFF;} .my_license ul li.yellow .colored{color:#FFCB33;} .my_license ul li.yellow .licen_img_box{background-color:#FFCB33;} .my_license ul li.yellow .licen_btn{background-color:#FFF4D4; border:1px solid #FFCB33;} .my_license ul li.orange .colored{color:#FF6633;} .my_license ul li.orange .licen_img_box{background-color:#FF6633;} .my_license ul li.orange .licen_btn{background-color:#FEEAE4; border:1px solid #FF6633;} .my_license ul li.mint .colored{color:#62E2C9;} .my_license ul li.mint .licen_img_box{background-color:#62E2C9;} .my_license ul li.mint .licen_btn{background-color:#E5F8F1; border:1px solid #62E2C9;} .my_license ul li.purple .colored{color:#D81A62;} .my_license ul li.purple .licen_img_box{background-color:#D81A62;} .my_license ul li.purple .licen_btn{background-color:#FAE4ED; border:1px solid #D81A62;} /* 만료 라이선스 흑백 */ .my_license ul li.gray .licen_img_box{background-color:#DFDFDF;} .my_license ul li.gray .d_day_txt{color:#000000;} /* 라이선스 사용내역 팝업 디자인 */ .my_license ul li .popup_m{display:none; width:100%; position:absolute; bottom:-10px; left:0; z-index: 10;} .my_license ul li .popup_cont{display:block; width:100%; height: 520px; border-radius: 20px; padding:35px 30px; box-shadow: none;} .my_license ul li .popup_m .popup_cont ul{justify-content: flex-start; width: 100%;position:relative;} .my_license ul li .popup_m .popup_cont ul li>p{width: 80px;cursor: pointer; border-radius:50px; padding:6px 15px; background-color: #EFEFEF; } .my_license ul li .popup_m .popup_cont ul li>p.on{background-color: #FFCB33;} .my_license ul li .popup_m .popup_cont ul li .table_box{display:none; width:100%; height: 360px;margin-top:20px; overflow-y: auto; position:absolute; top:100%; left:50%; transform: translateX(-50%);} .my_license ul li .popup_m .popup_cont ul li .table_box.on{display: block;} .my_license ul li .popup_m .popup_cont ul li .table_box::-webkit-scrollbar{background-color: #fff; border-radius: 10px; width: 8px;} .my_license ul li .popup_m .popup_cont ul li .table_box::-webkit-scrollbar-thumb{background-color: #e1e1e1; border-radius: 10px; width: 6px;} .my_license ul li .popup_m .popup_cont ul li table{width:98%; top:0; visibility: visible; border-collapse: collapse; border:none;} .my_license ul li .popup_m .popup_cont ul li table tr td{padding:8px 0;} .my_license ul li .popup_m .popup_cont ul li table thead tr{background-color:#8F8F93; color:#fff;} .my_license ul li .popup_m .popup_cont ul li table tr td:first-child{border-radius: 5px 0 0 5px; width:auto;} .my_license ul li .popup_m .popup_cont ul li table tr td:last-child{border-radius: 0 5px 5px 0;} .my_license ul li .popup_m .popup_cont ul li table thead tr td p{border-right:1px solid #fff;} .my_license ul li .popup_m .popup_cont ul li table thead tr td:last-child p{border:none;} .my_license ul li .popup_m .popup_cont ul li table tbody tr td{font-weight: 400;} .my_license ul li .popup_m .popup_cont ul li table tbody tr td p{background-color:#F0F0F0; color:#8F8F93; padding:8px 0;} .my_license ul li .popup_m .popup_cont ul li table tbody tr:first-child td {padding-top:12px;} .my_license ul li .popup_m .popup_cont ul li table tbody tr td:first-child p{border-radius: 5px 0 0 5px; color:#000;} .my_license ul li .popup_m .popup_cont ul li table tbody tr td:last-child p{border-radius: 0 5px 5px 0;} .my_license ul li .popup_m .popup_cont .popup_close_m{position:absolute; top:30px; right:30px;cursor:pointer;} .my_license ul li .popup_m .popup_cont .popup_close_m:hover path{transition: all 0.3s; fill:#1D1D1F;} @media screen and (max-width:1281px) { .my_license>ul>li{width:48%; min-width:455px;} .my_license ul li .licen_img_box{border-radius: 100px; aspect-ratio: 1 / 1; width: 80px; height:80px; position:relative;} } @media screen and (max-width:1083px) { .my_license>ul>li{min-width:100%; width:100%;} } @media screen and (max-width:768px) { .mypage_cont{padding-top:30px; margin-bottom:200px;} .licen_code,.my_license{width: 90vw;} .mypage_cont>div{margin-bottom:70px; gap:30px;} .licen_code .licen_input input, .licen_code .licen_input button{border-radius: 10px; padding:10px 15px;} .licen_code .licen_input input{width:250px;} .licen_code .licen_input button{width:90px} .my_license>ul>li{height:160px; border-radius: 10px; padding:20px 20px;gap:10px;} .my_license ul li .licen_img_box{width: 50px; height:50px; } .my_license ul li .license_info .row_flex>div>p.fs_20{font-size:14px;} .my_license ul li .license_info .row_flex .licen_btn{width:60px; padding:6px 0;} .my_license ul li .license_info .row_flex.d_day>p.fs_16{font-size: 12px;} .my_license ul li .license_info .row_flex span.fs_14{font-size:10px;} .my_license ul li .popup_cont{height: 340px; padding:25px 20px;} .my_license ul li .popup_m .popup_cont ul{justify-content: center;} .my_license ul li .popup_m .popup_cont ul li .table_box{height:200px;} .my_license ul li .popup_m .popup_cont .popup_close_m{position:absolute; top:20px; right:20px; width:20px;} .d_day_txt.caution::before{height: 20px; width: 20px;} } /* 마이페이지 - 내 수업 */ .class_cont>p{margin:30px 0 20px 0;} .class_cont>div>p{margin:30px 0;} .class_cont .class_sol{display: flex; flex-flow:row wrap; align-items: center; justify-content: flex-start; gap:30px;} .class_cont .class_sol .row_f{display: flex; flex-flow:row wrap; align-items: center; justify-content: flex-start; gap:10px;} .class_cont .class_sol .row_f>img{width: 45px;} .class_cont .add_class {width: fit-content; display: flex; flex-flow: column nowrap; align-items: center; gap:0px;} .class_cont .part_class .intr{margin:30px 0; display: flex; flex-flow:row wrap; align-items: center; justify-content: flex-start; gap:10px;} .class_cont .part_class .intr>img{width:20px;} .class_cont .input_pack{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; margin-bottom:10px; position:relative;} .class_cont .input_pack input{border-radius: 10px;font-weight:500; padding:15px 20px 15px 90px; outline:none; width:450px;} .class_cont .input_pack p{position:absolute; top:50%; left:20px; transform: translateY(-50%);} .class_cont .add_class .btn_wrap, .class_cont .part_class .btn_wrap{width:fit-content; margin:0 auto; margin-top:20px;} .class_cont .btn_wrap button{border-radius: 10px; margin-right:20px; padding:15px 0; width:140px;color:#fff; background-color: #000;} .class_cont .btn_wrap button:last-child{margin-right:0;} .class_cont .btn_wrap button.long_btn{width:200px; background-color: #000;} .class_cont .btn_wrap button.long_btn.inactive{background-color: #C0C0C0; cursor: not-allowed;} .class_cont ul.class_list{ height: 480px; overflow-y: auto; display: flex; flex-flow:row wrap; align-items: flex-start; justify-content: flex-start; gap:20px;} .class_cont ul.class_list::-webkit-scrollbar{border-radius: 10px; width: 6px; background-color:#e9e9e9;} .class_cont ul.class_list::-webkit-scrollbar-thumb{border-radius: 30px; width:6px; background-color: #c0c0c0; } .class_cont ul.class_list li{width:32%; min-width: 360px; height:420px; display:flex; flex-flow:column nowrap; justify-content: space-between; background-color: #fff; border-radius: 20px; padding:30px; position:relative;} .class_cont ul.class_list li .modi_p{position:absolute; top:0; left:0;width:100%; height:420px; display:flex; flex-flow:column nowrap; justify-content: space-between; background-color: #fff; border-radius: 20px; padding:30px;display:none; } .class_cont ul.class_list li .row_f{display: flex; flex-flow:row wrap;} .class_cont ul.class_list li .row_f.class_tit{flex-flow:row nowrap; justify-content: space-between;} .class_cont ul.class_list li .modi_p .row_f.class_tit>p.fs_20{text-align:center; margin: 0 auto;} .class_cont ul.class_list li .row_f.class_tit .icon_wrap{display: flex; flex-flow: row nowrap;} .class_cont ul.class_list li .row_f.class_tit img{width:26px; height:fit-content; margin: 0 5px;cursor: pointer;} .class_cont ul.class_list li .row_f.class_tit svg{width:22px; height:auto; margin: 0 5px;cursor: pointer;} .class_cont ul.class_list li .modi_p .row_f.class_tit>.icon_wrap{position:absolute; top:30px;right:30px;} .class_cont ul.class_list li .modi_p .editClassForm{display: flex; flex-flow:column; justify-content: center; gap:20px; height:100%;} .class_cont ul.class_list li .class_info{display: flex; flex-flow:column nowrap;} .class_cont ul.class_list li .class_info .row_f{color:#949494; margin-bottom:12px; align-items: center; gap:12px; flex-flow:row nowrap;} .class_cont ul.class_list li .class_info .row_f img{width:45px; height:auto; } .class_cont ul.class_list li .btn_wrap{margin:0 auto; width: fit-content;} .class_cont ul.class_list li .btn_wrap button{background-color: #6AC7FA; margin-right:0;} .class_cont ul.class_list li .modi_p .btn_wrap button{background-color: #000;} .class_cont ul.student_list{width:100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap:20px;} .class_cont ul.student_list li{width:30%; min-width: 320px; height:100px; padding:20px 30px; display: flex; flex-flow: row nowrap; align-items: flex-end; justify-content: space-between; gap:16px; border-radius: 20px; background-color: #fff;} .class_cont ul.student_list li>div{width:100%; height:100%;display: flex; flex-flow: column nowrap; justify-content: space-around; color:#000;} .class_cont ul.student_list li .ic_stu{height:58px; width: auto;} .class_cont ul.student_list li>div>p>span{color:#949494; margin-left:5px;} .class_cont ul.student_list li .ic_bin{width:auto; height:28px; cursor: pointer;} .class_cont ul.student_list li.no_student{display:flex;flex-flow:column nowrap; align-items: center; justify-content: center; width: 100%; height: fit-content; padding:50px 0; background-color: transparent;} .class_cont ul.student_list li.no_student>p{text-align: center; color:#8F8F93;} /* 영문페이지 input padding-left 조정 */ .class_cont.class_en ul.class_list li .modi_p .row_f.class_tit>p.fs_20{width:80%;} .class_cont.class_en .input_pack input{padding:15px 20px 15px 110px;} @media screen and (max-width:1080px) { .class_cont>p{margin:0px 0 20px 0;} .class_cont .class_sol .row_f>img{width: 35px;} .class_cont ul.class_list li{width:48%; min-width:320px; height:auto; gap:10px;} .class_cont ul.class_list li .modi_p{ width:100%; min-width:320px; height:100%; gap:10px;} .class_cont ul.class_list li .modi_p .input_pack input{width:100%;} .class_cont ul.student_list li{width:48%; min-width:320px; height:90px;} .class_cont ul.student_list li .ic_stu{height:48px; width: auto;} .class_cont ul.student_list li .ic_bin{height:24px;} } @media screen and (max-width:860px) { .class_cont .class_sol{gap:10px;} .class_cont ul.class_list li{width:95%; margin:0 auto; min-width:0; height:auto; gap:10px;} .class_cont ul.class_list li .modi_p{ width:100%; margin:0 auto; min-width:0; height:100%; gap:10px;} .class_cont ul.class_list li .class_info .row_f img{width:30px;} .class_cont ul.class_list li .btn_wrap button {padding:10px 0;} .class_cont ul.student_list li{width:48%; min-width:0; height:auto; flex-flow: column nowrap; align-items: flex-start;} .class_cont ul.class_list li .row_f.class_tit img,.class_cont ul.class_list li .row_f.class_tit svg{width:24px;} .class_cont ul.student_list li .ic_stu{height:48px; width: auto;} .class_cont ul.student_list li .ic_bin{height:24px; margin-left:90%;} .class_cont .fs_20{font-size:14px;} .class_cont .fs_18{font-size: 14px;} .class_cont .fs_16{font-size: 12px;} .class_cont .fs_14{font-size:10px;} } @media screen and (max-width:768px) { .class_cont{width:90vw;} .class_cont .input_pack{font-size: 14px;} .class_cont .input_pack input{width:320px; padding:10px 15px 10px 80px;} .class_cont ul.class_list li .modi_p{width:100%; height:100%; padding:20px;} .class_cont ul.class_list li .modi_p .input_pack input{width:100%;} .class_cont .btn_wrap button{font-size: 14px; padding:10px 15px;} .class_cont .btn_wrap button.long_btn{width:160px; margin-right:5px;} .class_cont ul.class_list{height:380px;} .class_cont ul.class_list li{padding:20px;} .class_cont ul.class_list li .row_f.class_tit img,.class_cont ul.class_list li .row_f.class_tit svg{width:20px;} .class_cont ul.class_list li .class_info .row_f img{width:35px;} .class_cont ul.student_list li{width:46%; flex-wrap:wrap; gap:10px; padding:20px;} .class_cont ul.student_list li .ic_bin{margin-left:90%;} /* 영문페이지 input padding-left 조정 */ .class_cont.class_en .input_pack input{padding:10px 15px 10px 100px;} } @media screen and (max-width: 500px) { .class_cont .fs_22, .class_cont .fs_20{font-size:16px;} .class_cont ul.student_list{justify-content: center;} .class_cont ul.student_list li{width:95%; flex-flow: row nowrap; align-items: center;} .class_cont ul.student_list li .ic_bin{margin-left:0%;} } /* 내 정보 수정 페이지 */ .input_pack input[type="text"],.input_pack input[type="password"],.input_pack input[type="tel"],.input_pack input[type="email"],.input_pack input[type="number"]{border:1px solid #C0C0C0;} .input_pack input[type="text"]:focus,.input_pack input[type="password"]:focus,.input_pack input[type="tel"]:focus,.input_pack input[type="email"]:focus,.input_pack input[type="number"]:focus{border:1px solid #000000;} .modi_info>p{margin:30px 0 20px 0;} .modi_info .input_pack{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; margin-bottom:10px;} .modi_info .input_pack p{width:120px;} .modi_info .input_pack input{margin-right:10px; border-radius: 10px;font-weight:500; padding:15px 20px; outline:none; width:400px;} .modi_info .input_pack input:read-only{color:#adadad; border:1px solid #C0C0C0;} .modi_info .input_pack .pw_btn_wrap{position:relative;} .modi_info .input_pack .pw_btn_wrap input{padding-right: 42px; background-color:#fff;} .modi_info .input_pack .pw_btn_wrap button.pw_view{position:absolute; top:49%; right:20px; transform: translateY(-50%);} .modi_info .input_pack .pw_btn_wrap button.pw_view img{width:22px; height:auto;} .modi_info .warning{margin-left:120px; display: flex; flex-flow:row nowrap; align-items: center; justify-content: flex-start; gap:10px; color:#FF6633;margin-bottom:10px;} .modi_info .warning img{width:20px;} .modi_cont label{display: flex; flex-flow: row nowrap; align-items:center; justify-content: flex-start; gap:20px; margin:20px 0 60px 0; cursor: pointer;} .modi_cont #promo_mail{appearance: none; background-color:#DFDFDF; border-radius: 50px; width:20px; height:20px;cursor: pointer;} .modi_cont #promo_mail:checked{border:4px solid #dfdfdf; background-color:#FF6633;} .modi_cont .btn_wrap button{border-radius: 10px; margin-right:20px; width:140px; padding:15px 0; color:#fff;} .modi_cont .btn_wrap button.cancel{background-color: #C0C0C0;} .modi_cont .btn_wrap button.modify{background-color:#000000 ;} .modi_cont .input_pack .btn_wrap button{width:100px; margin-right:0;} @media screen and (max-width:790px) { .modi_cont{width: 90vw;} .modi_info .input_pack p{width:80px;} .modi_info .input_pack input{width:260px; border-radius: 10px; padding:10px 15px;} .modi_info .input_pack .pw_btn_wrap button.pw_view{right:10px;} .modi_info .input_pack .pw_btn_wrap button.pw_view img{width: 17px; height:auto;} .modi_info .input_pack .pw_btn_wrap input{padding-right:30px;} .modi_info .warning{margin-left:80px;} .modi_info .warning img{width:16px;} .modi_cont #promo_mail{width:16px; height:16px;} .modi_cont .btn_wrap button{padding:10px 0; width:90px;} } @media screen and (max-width:500px) { .modi_cont .mo_margin_left{width:fit-content;margin-top:10px; margin-left:80px;} .modi_cont .mo_margin_left button.id_check{margin-right:0; width:80px;} } /*-------------------------------------------------------------------------------------*/ /* 로그인 페이지 */ .login_cont{width:80vw; max-width: 1400px; padding:200px 0 100px 0; margin:0 auto; display: flex; flex-flow:column nowrap; align-items: center;} .login_cont #loginForm p.fs_26{text-align: center;} .login_cont .login_form{margin:70px 0 50px 0; display:flex; flex-flow: column; justify-content: center;} .login_cont .login_form .input_pack{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; margin-bottom:10px;} .login_cont .login_form .input_pack p{width:100px;} .login_cont .input_pack input{border-radius: 10px;font-weight:500; padding:15px 20px; outline:none; width:400px;} .login_cont .input_pack input::placeholder{color:#cccccc;} .login_cont .input_pack .pw_btn_wrap{position:relative;} .login_cont .input_pack .pw_btn_wrap input{padding-right: 42px; background-color:#fff;} .login_cont .input_pack .pw_btn_wrap button.pw_view{position:absolute; top:49%; right:20px; transform: translateY(-50%);} .login_cont .input_pack .pw_btn_wrap button.pw_view img{width:22px; height:auto;} .login_cont .login_opt{margin-top:20px; display:flex; flex-flow:row wrap; align-items: center; justify-content: center; gap:20px;} .login_cont .login_opt label{display: inline-flex; flex-flow: row nowrap; cursor:pointer; padding:5px 0 5px 30px; background:url("/img/sub/account/icon-unchecked-radio-gray.png") no-repeat 0px 50%; background-size: 20px 20px;} .login_cont .login_opt input[type="checkbox"]{display: none;} .login_cont .login_opt input[type="checkbox"]:checked + label{background:url("/img/sub/account/icon-checked-radio-black.png") no-repeat 0px 50%; background-size: 20px 20px;} .login_cont .btn_wrap{width:fit-content; margin:0 auto;} .login_cont .btn_wrap button{ border-radius: 10px; padding:15px 0; width:140px;color:#fff; background-color: #000000;} .login_cont .helper{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap:30px; margin-top:20px;} .login_cont .helper>div{display:flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap:30px; border-radius: 500px; background-color: #fff; width:300px; height:300px; aspect-ratio: 1 / 1;text-align: center;} .login_cont .helper>div>.btn_wrap button{padding:10px 0;} .login_cont .helper>div>.btn_wrap button.blue{background-color: #6AC7FA;} .login_cont .helper>div>.btn_wrap button.yellow{background-color: #FFCB33;} @media screen and (max-width:768px) { .login_cont>p.fs_26{margin-top:10px;} .login_cont>p{margin:10px 0;} .login_cont .login_form .fs_20{font-size:14px;} .login_cont .login_form .fs_16{font-size: 12px;} .login_cont .login_form .fs_14{font-size:10px;} .login_cont .input_pack .pw_btn_wrap button.pw_view{right:10px;} .login_cont .input_pack .pw_btn_wrap button.pw_view img{width: 17px; height:auto;} .login_cont .input_pack .pw_btn_wrap input{padding-right:30px;} .login_cont .login_form .input_pack p{width:80px;} .login_cont .login_form .input_pack input{width:300px; border-radius: 10px; padding:10px 15px;} } @media screen and (max-width:500px) { .login_cont .login_form .input_pack p{width:80px;} .login_cont .login_form .input_pack input{width:240px;} .login_cont .helper{flex-flow: row nowrap; gap:10px;} .login_cont .helper>div{gap:16px; border-radius: 50px; width:170px; height:250px;} .login_cont .helper>div>img{height:60px; width:auto;} .login_cont .helper>div>.btn_wrap button{width:100px;} } /* 비밀번호 찾기 페이지 */ .findpw_cont{width:80vw; max-width: 1400px; padding:200px 0 100px 0; margin:0 auto; display: flex; flex-flow:column nowrap; align-items: center;} .findpw_cont .find_option{position: relative;margin:50px auto; display: flex; width: 100%;flex-flow: row wrap; align-items: flex-start; justify-content: center; gap:20px;} .findpw_cont .find_option li{width:100%; max-width: 400px;} .findpw_cont .find_option li>p{cursor: pointer; padding:25px; text-align: center; border-radius: 50px; background-color: #fff;} .findpw_cont .find_option li.on>p{background-color:#6AC7FA; color:#fff;} .findpw_cont>.fs_20{text-align: center;} .findpw_cont .findpw_form{ margin:70px auto 50px auto; width:fit-content;} .findpw_cont .findpw_form:last-child{display:none;} .findpw_cont .findpw_form .input_pack{margin-top: 30px;display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; margin-bottom:10px;} .findpw_cont .findpw_form .input_pack p{width:120px;} .findpw_cont .findpw_form .row_f{margin-bottom:30px;display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap:20px;} .findpw_cont .findpw_form .row_f .input_pack{margin-bottom:0;} .findpw_cont .findpw_form .input_pack .btn_wrap{margin-top:0; margin-left:10px;} .findpw_cont .findpw_form .new_pw_set .btn_wrap{margin:30px auto; width:max-content;} .findpw_cont .findpw_form div>p.fs_20{ margin:50px 0; text-align: center;} .findpw_cont .findpw_form .new_pw_set .pw_btn_wrap{position:relative;} .findpw_cont .findpw_form .new_pw_set .pw_btn_wrap input{padding-right: 42px; background-color:#fff;} .findpw_cont .findpw_form div .pw_btn_wrap button.pw_view{position:absolute; top:49%; right:20px; transform: translateY(-50%);} .findpw_cont .findpw_form div .pw_btn_wrap button.pw_view img{width:22px; height:auto;} .findpw_cont .input_pack input,.findpw_cont .input_pack select{background-color:#fff;border-radius: 10px;font-weight:500; padding:15px 20px; outline:none; width:400px;} .findpw_cont .input_pack select{outline: none; border:1px solid #c0c0c0; appearance: none; background:url("/img/sub/account/icon-arrow-down.png") no-repeat 95% 50%; background-size: 16px auto; background-color: #fff;; border-radius: 10px; cursor: pointer; } .findpw_cont .input_pack input::placeholder{color:#cccccc;} .findpw_cont .findpw_form .input_pack .email_b{position:relative;} .findpw_cont .findpw_form .input_pack .email_b input{padding-right:100px;} .findpw_cont .findpw_form .input_pack .email_b>p.fw_m{position:absolute; top:50%; left:90%; transform: translate(-50%,-50%);} .findpw_cont .btn_wrap{display: flex;margin:20px auto;} .findpw_cont .btn_wrap button{ border-radius: 10px; padding:15px 0; width:140px;color:#fff; background-color: #000000;} @media screen and (max-width:830px) { .findpw_cont>p.fs_26{margin-top:10px;} .findpw_cont>p{margin:10px 0;} .findpw_cont .fs_20{font-size:14px;} .findpw_cont .fs_18{font-size: 14px;} .findpw_cont .fs_16{font-size: 12px;} .findpw_cont .fs_14{font-size:10px;} .findpw_cont .find_option{flex-flow: column nowrap; align-items: center;} .findpw_cont .find_option li p{padding:15px;} .findpw_cont .findpw_form .new_pw_set .pw_btn_wrap button.pw_view{right:10px;} .findpw_cont .findpw_form .new_pw_set .pw_btn_wrap button.pw_view img{width: 17px; height:auto;} .findpw_cont .findpw_form .new_pw_set .pw_btn_wrap input{padding-right:30px;} .findpw_cont .findpw_form .input_pack p{width:100px;} .findpw_cont .findpw_form .input_pack input, .findpw_cont .findpw_form .input_pack select{width:300px; border-radius: 10px; padding:10px 15px;} .findpw_cont .findpw_form .row_f{gap:10px;} .findpw_cont .findpw_form .input_pack .email_b input{padding-right:80px;} .findpw_cont .findpw_form .input_pack .email_b>p.fw_m{left:85%;} .findpw_cont .btn_wrap button{width:80px; padding:10px 0;} } @media screen and (max-width:500px) { .findpw_cont .find_option li{width:100%;} .findpw_cont .findpw_form{margin-top:15px;} .findpw_cont .findpw_form .row_f{gap:10px; flex-flow: column nowrap;} /* .findpw_cont .findpw_form .input_pack{justify-content: space-between;} */ .findpw_cont .findpw_form .input_pack .btn_wrap{margin: 10px 0 0 80px;} .findpw_cont .findpw_form .input_pack .btn_wrap.send_btn_wrap{margin:10px 0;} .findpw_cont .findpw_form .input_pack p{width:80px;} .findpw_cont .findpw_form .new_pw_set{width:100%;} .findpw_cont .findpw_form .input_pack input, .findpw_cont .findpw_form .input_pack select{width:250px;padding-right:30px;} } /* 비밀번호 변경 페이지 */ .modipw_cont{width:80vw; max-width: 1400px; padding:200px 0 100px 0; margin:0 auto; display: flex; flex-flow:column nowrap; align-items: center; gap:30px;} .modipw_cont>p.fw_m{margin:20px 0;} .modipw_cont .btn_wrap{margin:20px 0;} .modipw_cont .btn_wrap button{ border-radius: 10px; padding:15px 0; width:140px;color:#fff; background-color: #000000;} /* 회원가입 페이지 */ .signup_cont{width:80vw; max-width: 1280px; padding:200px 0 100px 0; margin:0 auto; display: flex; flex-flow:column nowrap; align-items: flex-start;} .signup_cont>p{text-align: center; width: 100%; margin:20px 0;} .signup_cont .logo_wrap{margin-top:20px;width:100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap:10px;} .signup_cont .logo_wrap li{border-radius: 20px; background-color: #fff; padding:20px 0; width:24%; text-align: center;} .signup_cont .logo_wrap li:first-child>img{height:25px; width:auto;} .signup_cont .logo_wrap li>img{height:30px; width:auto;} .signup_cont .signup_form{margin-bottom:50px; width:100%; position:relative;} .signup_cont .signup_form .greet_cat{position:absolute; top:20%; right:0; transform: translateY(-50%); width:35%; max-width: 350px;} .signup_cont .signup_form>#signupForm>div{margin:80px 0; width:100%;} .signup_form>#signupForm>div>p.fs_20{margin-bottom:30px;} .signup_cont .signup_form span.blue_txt{display:none; color:#6AC7FA; font-weight: 500; margin:0px 0px 10px 130px;} .signup_cont .signup_form span.blue_txt.no_margin{margin:10px 0 0 0;} .signup_cont .signup_form span.blue_txt.visible{display: inline-block;} .signup_cont .signup_form span.pur_txt{ display:block; width:100%; color:#B56AFF; font-weight: 500; margin:0px 0px 0px 120px;} .signup_cont .signup_form .input_pack{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; margin-bottom:10px;} .signup_cont .signup_form .input_pack p{width:120px;} .signup_cont .input_pack input{border-radius: 10px;font-weight:500; padding:15px 20px; outline:none; width:440px; margin-right:10px;} .signup_cont .input_pack input::placeholder{color:#cccccc;} .signup_cont .input_pack .pw_btn_wrap{position:relative;} .signup_cont .input_pack .pw_btn_wrap input{padding-right: 42px; background-color:#fff;} .signup_cont .input_pack .pw_btn_wrap button.pw_view{position:absolute; top:49%; right:20px; transform: translateY(-50%);} .signup_cont .input_pack .pw_btn_wrap button.pw_view img{width:22px; height:auto;} .signup_cont .row_f{display: flex; flex-flow:row nowrap; align-items: center; justify-content: flex-start; gap:20px;} .signup_cont .row_f .gray_t{color:#cccccc;} .signup_cont .signup_form input[type="radio"]{display: none;} .signup_cont .acc_type{display: flex; flex-flow:column nowrap; align-items: center; justify-content: flex-start; gap:10px;} .signup_cont .acc_type>div{cursor:pointer; width:70px; height:70px; aspect-ratio: 1 / 1; border-radius: 300px; background-color: #000; display: flex; flex-flow:row nowrap; align-items: center; justify-content: center;} .signup_cont .acc_type>div>img{height:35px; width: auto;} .signup_cont .acc_type>div.blue.active{background-color: #6AC7FA;} .signup_cont .acc_type>div.violet.active{background-color: #B56AFF;} .signup_cont .acc_type>div.red.active{background-color: #FF6633;} .signup_cont .input_pack select{background:url("/img/sub/account/icon-arrow-down.png") no-repeat 90% 50%; background-size: 16px auto; border-radius: 10px;background-color: #fff; cursor: pointer; appearance: none; font-weight:500; padding:15px 20px; outline:none; width:210px;border:1px solid #c0c0c0; } .signup_cont .input_pack .qSelect{width:440px; background-position: 95% 50%; } .signup_cont .input_pack .qSelect option{border-radius:10px;} .signup_cont .input_pack .qSelect option:checked{background-color: #6AC7FA;} .signup_cont .input_pack .par_label{display: flex; flex-flow: row nowrap; cursor:pointer; padding:5px 0 5px 30px; background:url("/img/sub/account/icon-unchecked-radio-gray.png") no-repeat 0px 50%; background-size: 20px 20px; margin-right:10px;} .signup_cont .input_pack .par_verify{display: none;} .signup_cont .input_pack .par_verify:checked + .par_label{background:url("/img/sub/account/icon-checked-radio-black.png") no-repeat 0px 50%; background-size: 20px 20px;} .signup_cont .add_child{margin-top:30px; cursor: pointer; width: fit-content;} .signup_cont .add_child .add_icon{width: 24px; height:auto;} .signup_cont .btn_wrap button{border-radius: 10px; margin-right:20px; padding:15px 0; width:140px;color:#fff;} .signup_cont .btn_wrap button:first-child{background-color: #C0C0C0;} .signup_cont .btn_wrap button:last-child{background-color:#000000 ;} .signup_cont input[type="checkbox"]{display: none;} .signup_cont .label_bg{cursor: pointer; width: fit-content; display:flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding:5px 0 5px 40px; background:url("/img/sub/account/icon-unchecked-radio-gray.png") no-repeat 0px 50%; background-size: 22px 22px; } .signup_cont .terms_list .label_bg{padding:5px 0 5px 30px; background:url("/img/sub/account/icon-unchecked-radio-gray.png") no-repeat 0px 50%; background-size: 20px 20px; } .signup_cont input[type="checkbox"]:checked + .label_bg {background:url("/img/sub/account/icon-checked-radio-black.png") no-repeat 0px 50%; background-size: 22px 22px;} .signup_cont .underage_term{border-radius: 20px; height:fit-content; background-color: #fff; padding:20px 30px;} .signup_cont .underage_term>p{padding-left:40px; padding-top:10px;} .signup_cont .terms_list input[type="checkbox"]:checked + .label_bg {background:url("/img/sub/account/icon-checked-radio-black.png") no-repeat 0px 50%; background-size: 20px 20px;} .signup_cont .terms_list{width: 100%;border-radius: 20px; background-color: #fff; padding:0px 30px; margin-top:20px;} .signup_cont .terms_list li{display:flex; flex-flow: row wrap;align-items: center; justify-content: space-between; border-bottom:1px solid #DFDFDF; padding:20px 10px;} .signup_cont .terms_list li:last-child{border-bottom:none;} .signup_cont .terms_list li>.arrow_down{cursor: pointer; transition:all 0.3s ease-out;} .signup_cont .terms_list li>.arrow_down.upper{transform: rotate(180deg);} .signup_cont .terms_list li .detail_term{ width:100%; margin-top:20px; padding-left:30px; height:140px; overflow-y: auto; } .signup_cont .terms_list li .detail_term::-webkit-scrollbar{border-radius: 50px; width:8px; background-color: #F8F8F8;} .signup_cont .terms_list li .detail_term::-webkit-scrollbar-thumb{border-radius: 50px; background-color: #C0C0C0;} .signup_cont .warn_wrap .row_f{gap:10px;} .signup_cont .warn_wrap>.row_f>img{height: 26px;width:auto;} .signup_cont .warn_wrap div:last-child{margin:20px 0 0 30px;} .signup_cont .warn_wrap div p{line-height: 1.8em;} .signup_cont .warn_wrap div p a{text-decoration: underline;} .signup_cont .warn_wrap .step_div{margin:30px 10px; gap:30px; align-items: center;} .signup_cont .warn_wrap div p>span{color:#4285F4;} @media screen and (max-width:1024px) { .signup_cont .signup_form .greet_cat{display: none;} } @media screen and (max-width:768px) { .login_cont,.signup_cont,.findpw_cont{width:90vw; padding:100px 0 100px 0;} .signup_cont>p{margin:10px 0;} .signup_cont .logo_wrap li{border-radius: 10px; padding:15px 0;} .signup_cont .logo_wrap li:first-child>img{height:15px; width:auto;} .signup_cont .logo_wrap li>img{height:20px; width:auto;} .signup_cont .fs_20{font-size:14px;} .signup_cont .fs_16{font-size: 12px;} .signup_cont .fs_14{font-size:10px;} .signup_cont .input_pack .pw_btn_wrap button.pw_view{right:17px;} .signup_cont .input_pack .pw_btn_wrap button.pw_view img{width: 17px; height:auto;} .signup_cont .input_pack .pw_btn_wrap input{padding-right:30px;} .signup_cont .signup_form span.blue_txt{ margin:0px 0px 10px 80px;} .signup_cont .signup_form .input_pack p{width:80px;} .signup_cont .signup_form .btn_wrap{display:flex; justify-content: center; } .signup_cont .signup_form .btn_wrap button{padding:10px 15px;} .signup_cont .input_pack input{width:300px; border-radius: 10px; padding:10px 15px;} .signup_cont .input_pack select{ border-radius: 10px; padding:10px 15px; width:140px;} .signup_cont .input_pack .qSelect{width:300px; } .signup_cont .warn_wrap div:last-child{margin:20px 0 0 10px;} .signup_cont .warn_wrap .row_f{align-items: flex-start;} .signup_cont .warn_wrap>.row_f>img, .signup_cont .warn_wrap .row_f img{height:auto; width:20px; margin-top:2px;} .signup_cont .warn_wrap .step_div{ gap:15px; justify-content: center; text-align: center; align-items: center;} } @media screen and (max-width:500px) { .signup_cont .logo_wrap{flex-flow: row wrap; } .signup_cont .logo_wrap li{border-radius: 10px; padding:15px 0; width:140px;} .signup_cont .signup_form>div{margin:40px 0;} .signup_form>div>p.fs_20{margin-bottom:15px;} .signup_cont .acc_type>div{width:60px; height:60px;} .signup_cont .acc_type>div>img{height:25px;} .signup_cont .signup_form .input_pack p{width:80px;} .signup_cont .signup_form .input_pack.en p{width:90px;} .signup_cont .input_pack input{width:200px;margin-right:5px; padding: 10px 10px;} .signup_cont .input_pack.en input{width:230px;} .signup_cont .signup_form .btn_wrap button.id_check{width:55px;padding:10px 0; margin-right: 0;} .signup_cont .signup_form .btn_wrap button.id_check_en{width:88px;} .signup_cont .input_pack select{ border-radius: 10px; padding:9px 15px; width:100px; background-size:12px auto;} .signup_cont .input_pack .qSelect{width:200px; } .signup_cont .row_f{gap:10px;} .signup_cont .signup_form span.pur_txt{ display:block; width:100%; color:#B56AFF; font-weight: 500; margin:0px 0px 0px 80px;} #parent_phone_verify_timer, #parent_email_verify_timer, #member_phone_verify_timer,#member_email_verify_timer {margin-left:10px;} .signup_cont .signup_form .mo_margin_left{margin-top:10px; margin-left:80px;} .signup_cont .signup_form .mo_margin_left button.id_check{width:80px;} .signup_cont .add_child{margin-top:15px;} .signup_cont .add_child .add_icon{width: 20px; height:auto;} .signup_cont .underage_term{padding:15px 15px;} .signup_cont .underage_term>p{padding-top:0px;} .signup_cont .terms_list{padding:0px 15px;} .signup_cont .terms_list li{padding:10px 10px;} .signup_cont .terms_list li>img{width:18px;} .signup_cont .terms_list li .detail_term{height:80px;} .signup_cont .terms_list .label_bg{padding:5px 0 5px 30px; width:90%; background:url("/img/sub/account/icon-unchecked-radio-gray.png") no-repeat 0px 50%; background-size: 16px 16px; } .signup_cont .terms_list input[type="checkbox"]:checked + .label_bg {background:url("/img/sub/account/icon-checked-radio-black.png") no-repeat 0px 50%; background-size: 16px 16px;} .signup_cont .terms_list li .detail_term::-webkit-scrollbar{width:6px;} } /*-------------------------------------------------------------------------------------*/ /* 커뮤니티 > 다운로드 */ .page0501_1{height: 450px; display: flex; align-items: center; justify-content: center;margin: 90px auto;} /* 커뮤니티 > 교육/실증 사례 */ .commu_banner{max-width: 1520px; width:94%; aspect-ratio: 1 / 0.1549; background: url("/img/sub/0502/community_banner_img.png") no-repeat; background-size: cover; margin:0 auto; margin-top:50px; position:relative;} .commu_banner p{color:#fff;} .commu_banner .bnr_txt{ line-height: 1.5em; position:absolute; top:50%; left:15%; transform: translateY(-50%);} .commu_banner a{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap:12px; position:absolute; bottom:12%; right:3%; } .commu_banner a span{border-radius: 100px; display: inline; background-color: #fff; color:#00AAFF; padding:3px 9px;} @media screen and (max-width:890px) { .commu_banner .bnr_txt{line-height: 1.2em; font-size: 1.25rem;} } @media screen and (max-width:720px) { .commu_banner{display:none;} } /* 커뮤니티 > 교육/제작문의 */ .inquiry_content{max-width: 1520px; width:94%; display: flex; flex-flow: row nowrap; align-items:flex-start; justify-content: center; gap:10px; margin:0 auto; } .inquiry_content>li{width:33.3%;background-color: #fff; position:relative; border-radius: 20px; margin-top:50px;} .inquiry_content>li>div{transition: all 0.3s ease; min-height:260px; padding:30px 20px; border-radius: 20px; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; margin:0 auto;} .inquiry_content>li>div .icon_box{width:50px; height:50px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; border-radius: 100%; background-color: #00AAFF;} .inquiry_content>li>div.on .text_box p{color:#fff !important;} .inquiry_content>li>div.on .arrow_down path{fill:#fff;} .inquiry_content>li:nth-child(1)>div.on{background-color: #FF6633;} .inquiry_content>li:nth-child(2)>div.on{background-color: #00AAFF;} .inquiry_content>li:nth-child(3)>div.on{background-color: #29CC39;} .inquiry_content>li:nth-child(1)>div .icon_box{background-color: #FF6633;} .inquiry_content>li:nth-child(2)>div .icon_box{background-color: #00AAFF;} .inquiry_content>li:nth-child(3)>div .icon_box{background-color: #29CC39;} .inquiry_content>li>div.on .icon_box{background-color: #fff;} .inquiry_content>li:nth-child(1)>div.on .icon_box svg path{fill: #FF6633;} .inquiry_content>li:nth-child(2)>div.on .icon_box svg path{fill: #00AAFF;} .inquiry_content>li:nth-child(3)>div.on .icon_box svg path{fill: #29CC39;} .inquiry_content .text_box{text-align: center;margin-bottom:30px;} .inquiry_content .text_box .ctt_txt{color:#727276; margin-top:10px;} .inquiry_content .text_box .ctt_tit.c_blue{color:#00AAFF;} .inquiry_content .arrow_down{display:inline-block; cursor: pointer; transition: all 0.3s ease;} .inquiry_content li .info_wrap{display:none; width:100%; position:absolute; top:100%; left:0; background-color: #fff; border-radius: 0 0 20px 20px;} .inquiry_content li .info_wrap li{width:100%; padding:30px;} .inquiry_content li .info_wrap li>div{margin:20px auto;} .inquiry_content li .info_wrap li>div>p{color:#727276; margin: 5px 0;} .inquiry_content li .info_wrap li>div>p.b_st{margin-top:15px;} .inquiry_content li .info_wrap li>div>p.for_dot{padding-left:14px; position:relative;} .inquiry_content li .info_wrap li>div>p.for_dot::before{content:""; width:4px; height:4px; border-radius: 50px; position:absolute; left:0; top:8px;} .inquiry_content li .info_wrap .info_tit{margin-bottom:8px;} .inquiry_content>li:nth-child(1) .info_wrap .info_tit{color:#FF6633;} .inquiry_content>li:nth-child(2) .info_wrap .info_tit{color:#00AAFF;} .inquiry_content>li:nth-child(3) .info_wrap .info_tit{color:#29CC39;} .inquiry_content>li:nth-child(1) .info_wrap li>div>p.for_dot::before{background-color:#FF6633;} .inquiry_content>li:nth-child(2) .info_wrap li>div>p.for_dot::before{background-color:#00AAFF;} .inquiry_content>li:nth-child(3) .info_wrap li>div>p.for_dot::before{background-color:#29CC39;} @media screen and (max-width:1023px) { .inquiry_content{flex-flow: column nowrap; gap:0;} .inquiry_content>li{width:100%; margin-top:20px;} .inquiry_content>li>div{width:100%; min-height:180px; padding:20px 20px;} .inquiry_content>li>div .icon_box{width:40px;; height:40px;;} .inquiry_content>li>div .icon_box svg{width:20px; height:20px;} .inquiry_content .arrow_down{width:18px; height:auto;} .inquiry_content li .info_wrap{position:static;} .inquiry_content li .info_wrap li{padding:00px 30px;} .inquiry_content li .info_wrap li>div>p.for_dot::before{width:3px; height:3px; top:5px;} } /*기업소개>기업소개*/ .page0601_1 .b_motion{position:relative;} .page0601_1 .b_motion>p{color:#fff; width:fit-content; text-align: left; position:absolute; top:60%; left:35%; transform: translate(-50%,-50%);} .page0601_1 .b_motion>img{width:100%;} section.page0601_1 {z-index: -1; position: relative;} .company_intro {display: flex;flex-flow:column nowrap; align-items: center; justify-content: center; gap:50px; margin:100px auto;text-align: left;} .company_intro>p{text-align: center;} .page0601_1 .company_intro figure{width:fit-content; margin:0 auto;} .page0601_1 .company_intro img{width:300px; margin:0 auto;} .vision_wrap{ display: flex; justify-content: center; align-items: flex-start; gap:20px; position: relative;} .vision_box { display: flex;flex-direction: column; gap: 20px; align-items: center; width: 45%;border-right: solid 2px #d9d9d9;padding:60px 0;} .vision_box:last-child {border: 0px;} img.vision_icon{ width:100%; max-width: 120px;} img.mission_icon{width:100%; max-width:105px;} section.page0601_3 .bis_wrap{ display: flex;flex-flow: row nowrap; align-items: flex-start; justify-content: center; gap:0px;} .page0601_3 .bis_box{ width: 30%; margin: 30px 0; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap:10px;} .page0601_3 .bis_wrap img{ border-radius: 15px;width:90%;} .page0601_3 .bis_wrap h3{font-weight: 800;} .page0601_3 .bis_wrap p{margin-top:15px; color:#1D1D1F;} .page0601_3 .bis_wrap p.fs_18{color:#8F8F93;} br.br_1024{display: none;} @media screen and (max-width:1025px) { br.br_1024{display: block;} .page0601_1 .b_motion>p{top:55%;} } @media screen and (max-width:860px) { .page0601_1 .b_motion{padding-top:55px;} .page0601_1 .b_motion>p{top:45%; left:25px; width:100%; transform: translate(0,-50%);} section.page0601_3 .bis_wrap{flex-flow: column;} .page0601_3 .bis_box{width:100%;} } @media screen and (max-width:425px) { .page0601_1 .b_motion>p{display: none;} .page0601_3 .bis_wrap img{ width:270px;} .page0601_1 .company_intro img{width:200px;} } .overview_cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;} .card { display: flex;background: #fff;border-radius: 8px;padding: 30px 30px 50px;text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease;flex-direction: column;} .card:hover { transform: translateY(-5px);} .icon{text-align: left;} .icon img { max-width: 50px;width:100%;margin-left:10px; margin-bottom: 20px;} .card h5 {text-align: right;color:#d9d9d9;font-size: 2rem;font-weight: 800;margin-bottom:50px;} .card h4 {font-size: 1.5rem;;font-weight: 700;margin-bottom: 15px;text-align: left;} .card p {text-align: left;font-size: 1.125rem;line-height: 1.5;} .overview_map { margin-top: 60px; border: solid 1px #d9d9d9; } /* 테이블 스타일 */ .map_table_wrap table { width: 100%; border-collapse: collapse;font-size: 16px; color: #333;margin-top:50px;} .map_table_wrap .map_icon { width: 100px; text-align: center;} .map_table_wrap .map_icon img { max-width: 25px; height: auto;} .map_table_wrap td { padding: 40px 20px;line-height: 1.5;text-align: left; border-bottom: 1px solid #ddd; color:#1D1D1F;} .map_table_wrap .tb_tit { width: 120px;text-align: left; color:#8F8F93; font-size: 1.125rem;} .map_table_wrap tr:last-child td {border-bottom: none;} /* 연혁 리스트 스타일 */ .history_list {margin-top: 20px;} .history_item { margin-bottom: 30px; display: flex; border-bottom: solid 1px #d9d9d9;padding-bottom: 30px;} .history_year {font-size: 2.25rem;font-weight: 800;width: 20%;text-align: left;color: #9f91e4} .history_content {list-style: none; margin: 0; padding: 0;} .history_content li {display: flex;margin-bottom: 10px; line-height: 1.5;align-items: center;gap:35px;} .history_date {display: none;font-size:1.125rem; font-weight: 600; color: #333;width:20px; flex-shrink: 0;} .history_text {font-size: 1.125rem;color: #555;line-height: 1.5; text-align: left;} /* 반응형 스타일 */ @media (max-width: 768px) { .history_content li {gap: 0px; align-items: flex-start;} } @media screen and (max-width: 720px) { .company_intro {gap:15px; margin-bottom: 90px;} .vision_wrap{flex-direction: column} .vision_box { width: 94%; margin: 0 auto;border-bottom: solid 2px #d9d9d9;border-right: 0px; padding: 40px 0;} .bis_wrap {flex-direction: column;gap:50px;} .card{padding:20px;} .card h5 {margin-bottom:15px;} .map_table_wrap .tb_tit {width: 80px;} .map_table_wrap td {padding:40px 10px; word-break: keep-all;} .map_table_wrap .map_icon {width: 40px;} .map_table_wrap .map_icon img {max-width: 20px;} .history_item {flex-direction: column; gap: 20px;} } /*메타트리*/ .c_red{color:#FF6633;} .c_purple{color:#B56AFF;} .c_yellow{color: #FFCB33;} .c_green{color: #29CC39;} .c_brown{color: #663514;} .bg_brown{background-color: #663514 !important;} .bg_red{background-color: #FF6633 !important;} .bg_purple{background-color: #B56AFF !important;} .bg_yellow{background-color: #FFCB33 !important;} .page_0101_top{position:relative;} .page_0101_top .topperAni{width:7%; position:absolute; bottom: 37%; left:60%; transform: translateX(-50%);animation: wobble-hor-bottom 4s both infinite;} @keyframes wobble-hor-bottom { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-5%) rotate(-6deg); transform: translateX(-5%) rotate(-6deg); } 30% { -webkit-transform: translateX(5%) rotate(6deg); transform: translateX(5%) rotate(6deg); } 45% { -webkit-transform: translateX(-5%) rotate(-6deg); transform: translateX(-5%) rotate(-6deg); } 60% { -webkit-transform: translateX(5%) rotate(6deg); transform: translateX(5%) rotate(6deg); } 75% { -webkit-transform: translateX(-5%) rotate(-6deg); transform: translateX(-5%) rotate(-6deg); } } .page_0301_1{background-color: #f5f5f5; padding-top:50px ;padding-bottom: 200px;} .page_0301_1 .b_cont_txt{color:#8F8F93; font-weight: 600;} .page_0301_1 .b_cont_box{ background-color: #fff;} .page_0301_1 .b_tit_logo {max-width: 200px; } .page_0301_1 .b_cont_box {display: flex;flex-direction: column;} .page_0301_1 .b_cont_box h2{margin-top:40px;} .page_0301_1_2{background:none; background-color: #fff;} .page_0301_1_2 h3{color:#1D1D1F;} .page_0301_1_2 .b_cont_txt{color:#8F8F93;} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li{color:#fff; padding-top:0; width:250px; height:250px; border-radius: 100%;} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li figure{transform: translateY(-20px);} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li figure img{height:150px; opacity: 1;} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li p span{font-size: 42px;} @media screen and (max-width:1024px) { .page_0301_1_2 .b_inner .b_cont_box ul{gap:20px;} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li{ width:200px; height:200px;} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li figure img{height:100px; opacity: 1;} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li p span{font-size: 42px;} } @media screen and (max-width:720px) { .page_0301_1{padding-bottom: 100px;} .page_0301_1_2 .b_inner .b_cont_box ul{height: fit-content; flex-flow : column nowrap; gap:40px; align-items: center; justify-content: center;} .page_0301_1_2 .b_inner .b_cont_box ul.b_img_list li{display: block; position:static; transform: none;} .page_0101_top .topperAni{bottom:27%;} } .page_0301_2 .page_0101_4 .b_txt_box { width: 45%;} .page_0301_2 .page_0101_4 .b_img_box { width: 50%; aspect-ratio: 6 / 6;} .metatree_txt_wrap {text-align: center;} .metatree_txt_wrap p{margin-top: 20px;} .metatree_circle { text-align: center;margin:60px auto 0;} .metatree_circle ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 40px;} .metatree_circle ul li { width: 300px; height: 300px;background-color: #fdb9a8;border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);} .metatree_circle ul li:nth-child(2) { background-color: #d3c4f3;} .metatree_circle ul li:nth-child(3) { background-color: #a4d8f9;} .metatree_circle ul li span { font-weight: bold; line-height: 1;} .page_0301_2{padding-top:150px ;padding-bottom: 200px;text-align: center;display: flex; flex-direction: column;align-items: center;} .page_0301_2 .b_inner{display: flex; flex-direction: column;align-items: center;} .page_0301_2 .b_cont_txt{color:#8F8F93; margin-top:20px;} .page_0301_2 #specs_swiper{width:99vw; padding:30px 0; margin-top:30px;} .page_0301_2 .specs_wrap .swiper-slide p{color:#1D1D1F; width: 100%; text-align: center;margin-bottom:20px;} .page_0301_2 .specs_wrap .swiper-slide figure{width:100%; margin:0 auto; margin-bottom:20px;} .page_0301_2 .specs_wrap .swiper-slide figure img{max-height: 500px; width: fit-content; max-width: 100%; margin:0 auto;} .page_0301_2 .specs_wrap .swiper-slide picture{width:100%; height:auto; margin:0 auto; display: flex; align-items: center; justify-content: center;} .page_0301_2 #specs_swiper .swiper-pagination-bullet{background:#FFCB33!important;} @media screen and (max-width:790px) { .page_0301_2{ padding-top:100px; padding-bottom:50px;}; .page_0301_2 #specs_swiper{margin-top:0px;} .page_0301_2 .specs_wrap .swiper-slide p{width: 100%; text-align: center;} .page_0301_2 .specs_wrap .swiper-slide figure{width:90%;} .page_0301_2 .specs_wrap .swiper-slide picture{height:100%; width:auto; } } #play-pause-button img {filter: invert(1);padding:10px 20px;} .page_0301_3{background:url(/img/sub/0301/metatree_sec03_bg.png) no-repeat center; background-size: 100% 100%;} .page_0301_3 .b_cont_txt{color:#8F8F93; font-weight: 600;} .page_0301_3 .b_cont_box{ display: flex;max-width: 1300px; margin: 0 auto; width: 100%; position: relative; justify-content: center; align-items: flex-start; height: 680px;} .page_0301_3 .b_img_box{width: 58%; aspect-ratio: 10 / 6;} .page_0301_3 .b_img_box ul{position: relative;} .page_0301_3 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0301_3 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0301_3 .b_img_box li figure img{display: block; max-width: 100%;} .page_0301_3 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0301_3 .b_img_box li.b_img_02 {z-index: 3;} .page_0301_3 .b_img_box li.b_img_03 {z-index: 5;} .page_0301_3 .b_img_box li.b_img_04 {z-index: 7;} .page_0301_3 .b_txt_box {width: 38%;} .page_0301_3 .b_txt_box li {padding:30px 0; border-bottom:1px solid #d9d9d9; } .page_0301_3 .b_txt_box li:last-child{border-bottom: 0;} .page_0301_3 .b_txt_box .b_num{color: #d9d9d9;} .page_0301_3 .b_txt_box .b_cont{margin-top: 20px; color: #d9d9d9;} .page_0301_3 .b_img_box { width: 45%; aspect-ratio: auto; } @media screen and (max-width: 1080px){ .page_0301_3 .b_cont_box{gap:20px;} .page_0301_3 .b_tit_box{margin-bottom: 50px;} .page_0301_3 .b_txt_box li {padding: 30px 10px;} .page_0301_3 .b_txt_box .b_cont {margin-top: 12px;} .page_0301_3 .b_img_box{width:40%;} } @media screen and (max-width: 980px){ .page_0301_3 .b_cont_box{flex-direction: column-reverse; align-items: center; justify-content: flex-end; height:580px;} .page_0301_3 .b_txt_box {width: 100%; max-width: 560px;} .page_0301_3 .b_img_box {width: 100%; max-width: 560px;} .page_0301_3 .b_img_box ul{height: 100%;} .page_0301_3 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0301_3 .b_txt_box ul{height: 100px; position: relative; } .page_0301_3 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; border-bottom: 0; background-color: #fff; padding: 0 10px;} .page_0301_3 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0301_3 .b_txt_box li.b_txt_02{z-index: 3;} .page_0301_3 .b_txt_box li.b_txt_03{z-index: 5;} .page_0301_3 .b_txt_box li.b_txt_04{z-index: 7;} .page_0301_3 .b_txt_box .b_num.c_red{color:#FF6633;} .page_0301_3 .b_txt_box .b_num.c_purple{color:#B56AFF;} .page_0301_3 .b_txt_box .b_num.c_yellow{color: #FFCB33;} .page_0301_3 .b_txt_box .b_num.c_green{color: #29CC39;} .page_0301_3 .b_txt_box .b_cont{color: #663514;} } @media screen and (max-width: 720px){ .page_0301_3{background-size: auto 100%;padding-top: 150px; padding-bottom:50px;} .page_0301_3 .b_cont_box{gap:0px;} .page_0301_3 .b_txt_box ul{height: 82px; } /* _en 영문페이지 css */ .page_0301_en.page_0301_3 .b_txt_box ul{height: 90px; } .page_0301_3 .b_img_box li figure{border-radius: 7.5px;} } .page_0301_4{background:none;} .page_0301_4 h3{color:#1D1D1F;} .page_0301_4 .b_cont_txt{color:#8F8F93; text-align: center;} .page_0301_4 .b_cont_box .b_top_box{display: flex; flex-flow:column; gap:30px; align-items: center; justify-content: center;} .page_0301_4 .b_cont_box .b_top_box figure{width:80%; max-width:1100px;} .page_0301_4 #specs_swiper{position:relative;} .page_0301_4 #specs_swiper .swiper-pagination-bullet{background:#FF6633!important;} .page_0301_5 {text-align: center;background-color: #fff;} .page_0301_5 img {width:100%;max-width: 1020px; border-radius: 20px;} .page_0301_8 .cert_text{height:200px;} @media screen and (max-width:1030px){ .page_0301_8 .cert_text{padding: 30px 20px;} } @media screen and (max-width:760px){ .page_0301_8 .cert_text{padding:30px;} .page_0301_8 .cert_logo{height:240px;} } .page_0301_7{background:none; background-color: #fff;} .page_0301_7 .b_cont_txt{color:#8F8F93;} .page_0301_7 .b_inner .b_cont_box figure{margin-top:100px;} .b_tit_logo img {width: 100%;max-width:280px;} .page_0301_1 .b_tit_logo img {width: 100%;max-width:280px; } .page_0301_1 .b_cont_box img {width: 100%;max-width:1020px; } /*---------------푸터부분-----------------*/ .page_0301_f.b_banner_sec{padding:0;width: 100%;} .page_0301_f .b_box_03{background: url(/img/sub/0301/metatree_footer_bg.png) no-repeat bottom center; background-size: 100% auto; height: 800px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:200px; overflow: hidden; background-color:#f5f5f5;} .page_0301_f .b_box_03 p{margin:25px 0 45px; text-align: center;} .page_0301_f .b_box_03 .b_more_btn{width: 240px; height:60px; text-align: center; padding:0; background-color: #1D1D1F; border:0; color: #fff; box-shadow: none; border:none;} .page_0301_f .b_box_03 .b_more_btn span{display: block; width:100%;} @media screen and (max-width: 720px){ .page_0301_f .b_box_03{height: 345.8px; padding-top:50px;} .page_0301_f .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } .image-viewer { max-width: 1200px; margin: 0 auto; text-align: center; position: relative;margin-top: 50px;} .image-container {position: relative; width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 20px;} .image-container img { width: 100%; height: auto; transition: opacity 2s ease, transform 2s ease; position: relative; display: block; opacity: 1;} .image-container img.hidden { opacity: 0;transition: opacity 2s ease; pointer-events: none;} .image-title {margin-top: 10px; font-size: 1.125rem; font-weight: bold;transition: opacity 2s ease, transform 2s ease;} #page-info { margin: 0 10px; font-size: 16px;} .control-wrap {margin-top:20px; display: flex; flex-direction: row; justify-content: space-between;align-items: center;} .controls { display: flex; justify-content: center; align-items: center; gap: 10px;} /* #play-pause-button { padding: 5px 10px; font-size: 16px;background-color: #828282; color: white; border: none; border-radius: 5px; cursor: pointer;} #play-pause-button:hover { background-color: #000;} */ section.page_0301_6.b_sub_sec {text-align: center;background-color: #feffcb;} .page_0301_6 .b_cont_box .b_ytb_box { max-width: 1280px; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; } @media screen and (max-width: 1080px) { .metatree_circle ul li{width:220px;height:220px;} } @media screen and (max-width: 720px) { .metatree_circle ul { flex-direction: column;gap:20px;} .metatree_circle ul li{width:200px;height:200px;} .page_0301_6 .b_cont_box .b_ytb_box {border-radius: 10px;} } /*vrcube*/ .sub_page_mb{display: flex; align-items: center; justify-content: center;padding: 150px 0;text-align: center;margin-bottom: 180px;} .page_0201_1 { position: relative; padding: auto; overflow: hidden; height: 100vh; /* 섹션 높이 */ } .page_0201_video{width:100%; height:auto; position:absolute;top:0;left:0;filter:brightness(0.3);} .page_0201_1 .b_tit_box{position:absolute; top:50%;left:50%; transform: translate(-50%,-50%); width:100%; margin :auto 0;} .page_0201_1 .b_tit_box .b_cont_txt{color:#ececec;} .page_0201_1 .b_tit_box .b_logo_box img{max-width:500px;} .page_0201_1 .b_tit_box .b_more_btn figure{background-color: #fff;} @media screen and (max-width:1440px) { .page_0201_video{height:100%; width:auto; left:50%; transform: translateX(-50%);}} @media screen and (max-width:1080px) { /* .page_0101_1 .b_tit_box .b_logo_box{margin-bottom:20px;} */ .page_0201_1 .b_tit_box{top:50%;} } .page_0201_1 .dark_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); /* 초기값 */ z-index: 1; } .page_0201_1 .cube_icon img { width: 100%; max-width: 150px; margin-bottom: 20px; opacity: 0; transform: scale(0.5); /* 초기값 */ } .cube_wrap.b_tit_box { position: relative; z-index: 2; } /* cube_sec_wrap을 중앙에 위치시키는 기본 설정 */ .cube_sec_wrap { position: absolute; top: 100%; /* 초기 위치 - 화면 아래 */ left: 50%; transform: translate(-50%, -50%); transition: top 0.3s ease, transform 0.3s ease; /* 애니메이션 효과 (속도 빠르게) */ z-index: 2; } /* cube_icon이 등장할 때의 애니메이션 */ .page_0201_1 .cube_icon img.visible { opacity: 1; transform: scale(1); } /* 버튼이 하단으로 이동하는 애니메이션 */ .page_0201_1 .cube_sec_wrap.move-to-bottom { top: 80%; transform: translate(-50%, -80%); } .page_0201_2 p {margin-top: 50px;} .page_0201_2 .b_ytb_box{max-width: 1280px; width: 100%; aspect-ratio: 16/9; border-radius: 20px;} .page_0201_4 { background: url(/img/sub/0201/sub_bg.jpg) no-repeat center bottom / cover; } .page_0201_3{color:#fff; background-color: #000;} .page_0201_3 .b_tit_box span{border:1px solid #ffffff80; width:70px; display:inline-block; margin:30px auto 20px auto;} .cube_inq{margin:0 auto; max-width:1280px;width:100%;} .cube_inq label{margin: 25px auto; width:100%; display:flex; flex-flow:column nowrap; align-items: flex-start; justify-content: flex-start; gap:15px;} .cube_inq label.file{flex-flow:row nowrap} .cube_inq label input, .cube_inq label textarea{width:100%; outline:none; background-color: transparent; border:1px solid #ffffff90; border-radius: 2px; padding:10px 15px; font-size:18px; color:#ffffff;} .cube_inq label textarea{resize: none; height:300px;} .cube_inq label input:invalid{border:1px solid #FF7373;} .cube_inq label div{position:relative; width:19%; height:100%;} .cube_inq label div p.fs_18{padding:10px 10px;width: 100%; min-width:140px; text-align: center; background-color: #3A3A3A; border:1px solid #ffffff80;} .cube_inq label input[type="text"].file_name{width:80%; cursor:default;} .cube_inq label input[type="file"]{cursor: pointer; opacity: 0; position:absolute;top:0;left:0; border:1px solid blue;width:100%;height:100%;} .cube_inq label input[type="file"]::-webkit-file-upload-button{cursor: pointer;} .cube_inq button.send_btn{margin: 0 auto; margin-top:100px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:15px; padding:10px 20px; width:170px; height:60px; border-radius: 5px; background-color: #193898; color:#ffffff;} .cube_inq button.send_btn img{width:20px; height:auto;} @media screen and (max-width:768px) { .cube_inq label .fs_20{font-size: 14px;} .cube_inq label input{font-size: 14px;} .cube_inq label div p.fs_18{min-width:80px; font-size:14px;} .cube_inq label textarea{height:100px;} .cube_inq button.send_btn{margin-top:50px; width:145px; height:45px;} .cube_inq button.send_btn p{font-size:16px;} .cube_inq label div{width:30%;} .cube_inq label input[type="text"].file_name{width:69%; cursor:default;} } .cube_cha_right { display: flex; gap: 80px; align-items: center;} .cube_cha_left { display: flex; justify-content: space-between; align-items: center;} .cube_cha_wrap { display: flex; flex-direction: column; gap: 200px;} /* 초기 상태 */ .cube_cha_wrap ul li { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } /* 활성화 상태 */ .cube_cha_wrap ul li.active { opacity: 1; transform: translateY(0); } /* 비활성화 상태 */ .cube_cha_wrap ul li.inactive { opacity: 0; transform: translateY(-20px); } .page_0201_2 {background-color:#000; color:#fff;display: flex;align-items: center;justify-content: center;padding: 150px 0;text-align: center;} .page_0201_2 h3{margin-bottom: 50px;} .page_0201_4 {text-align: center;background-color:#000;} .page_0201_4 h3{color:#fff;} .page_0201_4 .pdf_img{max-width: 500px;width: 100%;} .page_0201_4 .pdf_btn { display: flex; justify-content: center; align-items: center; gap:20px; } .cube_pdf_wrap{ display: flex; flex-direction: column; align-items: center; gap: 50px; margin-top: 30px; } .page_0201_5 { color:#fff; background-color:#000;padding: 180px auto;} .page_0201_5 .b_box_wrap { max-width: 1520px; margin: 0 auto; display: flex; justify-content: space-evenly; position: relative; flex-direction: row-reverse; } .page_0201_5 .pin-spacer{background-color:#000!important;} .page_0201_5 .b_txt_box{width:31.5%; position: relative;} .page_0201_5 .b_txt_box ul li{aspect-ratio: 9 / 10; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; margin-bottom:150px; position: absolute; left: 0; top: 0; width: 100%; opacity: 0; background-color: #000;} .page_0201_5 .b_txt_box ul li.b_txt_01{opacity: 1;} .page_0201_5 .b_txt_box ul li:last-child{margin-bottom: 0;} .page_0201_5 .b_txt_box li .b_tit_txt{margin: 20px 0;} .page_0201_5 .b_img_box{width:100%; } .page_0201_5 .b_img_box ul{display:flex; flex-flow:column; align-items: center; justify-content: center; gap:40px;} .page_0201_5 .b_img_box li {width:100%; height:fit-content; padding:30px 0px; background-color:#000; display:flex; flex-flow: column; align-items: center; justify-content: flex-start; gap:30px;} .page_0201_5 .b_img_box li p,.page_0201_5 .b_img_box li h4{text-align: center; word-break: keep-all;} .page_0201_5 .b_img_box li span.fs_20{display:inline-block; text-align: center; padding:6px 20px; width:160px; border:1px solid #ffffff70; border-radius: 30px;} .page_0201_5 .b_img_box li span.fs_20.en{width:200px;} .page_0201_5 .b_img_box li figure{aspect-ratio: 9/6; width:40%;margin-top:20px; min-width:300px; height:auto; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0201_5 .b_img_box li figure img{display: block; aspect-ratio: 9/6; height: 100%; width: 100%; object-fit: cover;} /* .page_0201_5 .b_img_box li:nth-child(1){z-index:1} .page_0201_5 .b_img_box li:nth-child(2){z-index:3;} .page_0201_5 .b_img_box li:nth-child(3){z-index:5} .page_0201_5 .b_img_box li:nth-child(4){z-index:7} */ @media screen and (max-width: 1080px){ .page_0201_5 .b_txt_box {width: 33.5%;} .page_0201_5 .b_txt_box ul li {aspect-ratio: 9 / 9.5;} .page_0201_5 .b_img_box li figure{width:50%} } @media screen and (max-width: 830px){ .page_0201_5 {padding-bottom: 60px;} .page_0201_5 .b_box_wrap {flex-direction: column-reverse;} .page_0201_5 .b_img_box {width: 100%;} .page_0201_5 .b_txt_box {width: 100%;} .page_0201_5 .b_txt_box ul {min-height: 220px;} .page_0201_5 .b_txt_box ul li{aspect-ratio:unset; height: 115%; margin-bottom: 0; justify-content: flex-start; padding-bottom: 25px;width: 100%;} .page_0201_5 .b_txt_box li .b_sub_txt{width: 70px; height: 18.5px; font-size: 9px;} .page_0201_5 .b_txt_box li .b_tit_txt {margin: 20px 0 10px;} .page_0201_5 .b_img_box li figure { margin-top: 0px;} .page_0201_1 .cube_sec_wrap.move-to-bottom {top: 50%; transform: translate(-50%, -100%);} .cube_sec_wrap { position: absolute; top: 100%; /* 초기 위치 - 화면 아래 */ left: 50%; transform: translate(-50%, -110%); transition: top 0.3s ease, transform 0.3s ease; /* 애니메이션 효과 (속도 빠르게) */ z-index: 2; } .cube_wrap{margin-top:50px;} } @media screen and (max-width: 720px){ .page_0201_2{padding:80px 0;} .cube_cha_right { gap: 50px; flex-direction: column-reverse;align-items: flex-start;} .cube_cha_left { gap: 50px; flex-direction: column;align-items: flex-start;} .page_0201_5 .b_img_box li span.fs_20{width:100px; padding:6px 10px;} .page_0201_5 .b_img_box li span.fs_20.en{width:140px;} } .page_0201_6{background-color: #1D1D1F;} .page_0201_6 .b_inner .swiper-container{padding:10px 5px; overflow: hidden;} .page_0201_6 .b_inner .swiper-container .swiper-slide{ width:600px; display: flex; flex-flow:row nowrap; align-items: center; justify-content: center;} .page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap{width:fit-content;} .page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide{border-radius: 20px; width:600px; aspect-ratio: 9 / 5.5;box-shadow: 0 0 10px 1px #1D1D1F20; position:relative; overflow: hidden;} .page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide .card_bg{filter: brightness(0.3); position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:101%;} .page_0201_6 .b_inner .swiper-container .swiper-slide.on .cert_wrap .card_slide .card_bg{filter:brightness(0.6);} .page_0201_6 .b_inner .swiper-container .swiper-slide.on .cert_wrap .card_slide{border:1px solid #fff;} .page_0201_6 .b_inner .swiper-container .swiper-wrapper.blue .swiper-slide.on .cert_wrap .card_slide{border:3px solid #39D0FF;} .page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide p{text-align: center; border-radius: 5px; width: max-content; color:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);} /* .page_0201_6 .b_inner .swiper-container .swiper-slide.on .cert_wrap .card_slide p{background-color:rgba(239, 105, 76, 0.85);} */ @media screen and (max-width:860px) { /* 영문페이지 특정 css */ .page_0401_en.page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide p.fs_32{font-size: 2.25rem;}/* .fs_36과 같은 사이즈 */ .page_0401_en.page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide span.pc, .page_0401_en.page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide br.pc{display: inline;} } @media screen and (max-width:720px) { /* 영문페이지 특정 css */ .page_0401_en.page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide span.pc, .page_0401_en.page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide br.pc{display: none;} .page_0201_6 .b_inner .swiper-container .swiper-slide{ width:fit-content;} .page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide{border-radius:10px; width:300px;} .page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide p{font-size:2rem;} .page_0201_6 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide p.en{font-size:1.85rem;} } .page_0201_7 {background-color: #000;} .page_0201_7 .b_cont_box{padding: 50px 0;background:url("../img/sub/0201/cube_sec07_bg.png") no-repeat top; background-size: cover;} .page_0201_7 p.fs_24{color:#fff; text-align: center;} .page_0201_7 .b_inner .b_cont_box .flex_col{margin:50px auto; display:flex; flex-flow:column; align-items: center; justify-content: flex-start; gap:20px;} .page_0201_7 .b_inner .b_cont_box .flex_col>img{width:28px; height:auto;} @media screen and (max-width:800px) { .page_0201_7{padding:50px 0px;} } /*----------------------------------------------------------------*/ /* VIRTUALWARE */ /* VIROO */ .b_sv_box_vir{border-bottom:none; background: url("../img/sub/0202/virtual_topper_bg.png") no-repeat top; background-size: 100% 100%;background-color: #1D1D1F;} .b_sv_box_vir .b_inner{display: flex; flex-flow:column nowrap; justify-content: center; gap:30px;} .b_sv_box_vir .b_inner .virtual_logo{width:20vw; max-width:180px; height:auto; margin: 0 auto;} .b_sv_box_vir .b_inner .b_navi_box{width:fit-content; margin:0 auto;} .b_sv_box_vir .b_inner .b_navi_box ul{width:fit-content; border-radius: 6px;display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; background-color: #fff; border-radius: 50px; margin-bottom:20px;} .b_sv_box_vir .b_inner .b_navi_box ul li a{display:block; color:#1D1D1F; border-radius: 6px; width:180px; background-color: #fff; padding:16px 0; font-size: 1.125rem;} .b_sv_box_vir .b_inner .b_navi_box ul li.on a{color:#fff;} .b_sv_box_vir .b_inner .b_navi_box ul li.on a.blue{background-color:#48BFEE;} .b_sv_box_vir .b_inner .b_navi_box ul li.on a.green{background-color:#74B800;} .b_sv_box_vir .b_inner .b_navi_box ul li.on a.teal{background-color:#005E60;} .b_sv_box_vir .b_inner .b_navi_box ul li.on a.blue2{background-color: #2672FF;} .page_0202_1{padding-top:5%; padding-bottom:5%;} .page_0202_1 .b_inner .b_tit_box .b_logo_box{margin-bottom:10%;} .page_0202_1 .b_inner .b_tit_box .b_logo_box img{width: 20vw; max-width:160px;} .page_0202_1 .b_inner .b_tit_box .b_cont_box{width:90%; margin: 0 auto; border-radius: 20px; overflow:hidden; margin-top:5%; aspect-ratio: 16 / 9;} .page_0202_1 .b_inner .b_tit_box .b_cont_box video{width:100%} .page_0202_2 .b_inner .b_cont_box .row_flex{ max-width:1280px; margin: 0 auto; display: flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box{width:32%; position:relative; overflow: hidden;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box p{color:#fff; position:absolute; top:5%; left:50%; transform: translateX(-50%);} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box img{width:100%;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box .btn_wrap{transition: all 0.5s;opacity:0;width:100%; height:50%; border-radius: 0 0 20px 20px; position:absolute; background: linear-gradient(to top, #000000 0%, #00000000 100%); bottom:0; left:0; display: flex; flex-flow: column; justify-content: flex-end; align-items: center;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box .btn_wrap a{transition: all 0.3s;padding:10px 0; display: inline-block; text-align: center; width:80%; border-radius: 5px; margin-bottom:30px; background-color: #fff; border:1px solid #48BFEE; color:#48BFEE;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box:hover .btn_wrap{opacity:1;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box .btn_wrap a:hover{background-color: #48BFEE; color:#fff;} .page_0202_3 .b_inner .b_cont_box .row_flex{max-width:1280px; margin:0 auto;display: flex; flex-flow:row nowrap; justify-content: space-between; align-items: center; gap:20px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap{flex:1;margin-right:5%; height:100%; display: flex; flex-flow: column nowrap; justify-content: space-evenly; gap:20px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap .icon_cir{background-color:#48BFEE; transition: all 0.3s; border-radius: 100px; width:60px;aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;} .page_0202_3 .b_inner .b_cont_box .txt_wrap .icon_cir img{width:55%;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div{padding:30px 0; display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: space-between; gap:20px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div:hover>.icon_cir{background-color:#161519 ;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div:first-child .icon_cir img{margin-left:-4px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div .txt_box{width:80%;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div .txt_box p.fs_18{margin-top:20px;} .page_0202_3 .b_inner .b_cont_box .img_wrap{flex:1; height:100%; display: flex; flex-flow: column; align-items: center; justify-content: space-between; gap:20px;} .page_0202_3 .b_inner .b_cont_box .img_wrap img{width:100%;} .page_0202_4{color:#fff;background: linear-gradient(to right bottom, #12152D 10%, #B56AFF 100%);} .page_0202_4 .b_inner .b_cont_box .row_flex{max-width:1280px; margin: 0 auto; display: flex; flex-flow:row nowrap; justify-content: space-between; align-items: center; gap:5%;margin:0px auto; margin-bottom:5%;} .page_0202_4 .b_inner .b_cont_box .card_wrap{flex:1;padding:20px; background-color: #fff; border-radius: 20px; color:#1D1D1F;} .page_0202_4 .b_inner .b_cont_box .card_wrap img{width:100%} .page_0202_4 .b_inner .b_cont_box .card_wrap .txt_box{display: flex; flex-flow: column nowrap; justify-content: center; gap:16px; margin:20px 0; } .page_0202_4 .b_inner .b_cont_box .txt_wrap{flex:2.5;} .page_0202_4 .b_inner .b_cont_box .txt_wrap .txt_box{padding:40px 0;border-bottom: 0.5px dashed #ffffff50; } .page_0202_4 .b_inner .b_cont_box .txt_wrap .txt_box:last-child{border-bottom:none;} .page_0202_4 .b_inner .b_cont_box .txt_wrap .txt_box p.fs_18{margin-top:20px;} .page_0202_5 .b_inner .b_cont_box .row_flex{ max-width:1280px; margin: 0 auto; display: flex; flex-flow:row nowrap; justify-content: center; gap: 30px; align-items: flex-start;} .page_0202_5 .b_inner .b_cont_box .card_wrap{width:48%; display:flex; flex-flow:column nowrap; justify-content: space-between; gap:30px; max-width:600px; aspect-ratio: 3 / 3.2 !important; padding:30px; background-color: #fff; border-radius: 20px; color:#1D1D1F;} .page_0202_5 .b_inner .b_cont_box .card_wrap img{width:100%} .page_0202_5 .b_inner .b_cont_box .card_wrap .txt_box{display: flex; flex-flow: column nowrap; justify-content: center; gap:16px; } .page_0202_5 .b_inner .b_cont_box .card_wrap .btn_wrap a{display: block; width:fit-content; color:#fff; background-color: #48BFEE; border:1px solid #fff; transition: all 0.3s; border-radius: 50px; padding:10px 20px; text-align: center; min-width: 120px;} .page_0202_5 .b_inner .b_cont_box .card_wrap .btn_wrap a:hover{background-color: #fff; color:#48BFEE; border:1px solid #48BFEE;} .page_0202_6{color:#fff;background: #161519;} .page_0202_6 .b_inner .b_cont_box .row_flex{ max-width:1280px; margin: 0 auto; display: flex; flex-flow:row nowrap; justify-content: center; gap: 30px; align-items: flex-start;} .page_0202_6 .b_inner .b_cont_box .card_wrap{width:32%; transition: all 0.5s; max-width:400px; aspect-ratio: 3 / 3.5 !important; padding:30px; background-color: #ffffff10; border-radius: 20px;} .page_0202_6 .b_inner .b_cont_box .card_wrap:hover{background-color: #ffffff20;} .page_0202_6 .b_inner .b_cont_box .card_wrap img{width:100%} .page_0202_6 .b_inner .b_cont_box .card_wrap .txt_box{display: flex; flex-flow: column nowrap; justify-content: space-between; gap:16px; text-align: center;} .page_0202_7{color:#fff;background: #000000;} .page_0202_7 .b_inner .b_cont_box .row_flex{max-width:1280px; margin: 0 auto; display: flex; flex-flow:row wrap; justify-content: center; gap: 20px; align-items: flex-start;} .page_0202_7 .b_inner .b_cont_box .card_wrap{width:32%; transition:all 0.5s; max-width:400px; aspect-ratio: 4 / 3 !important; padding:30px; background-color: #ffffff10; border-radius: 10px;} .page_0202_7 .b_inner .b_cont_box .card_wrap:hover{box-shadow: 0 0 16px 1px #ffffff50;} .page_0202_7 .b_inner .b_cont_box .card_wrap .tit_box{margin-bottom: 30px; display:flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;} .page_0202_7 .b_inner .b_cont_box .card_wrap .tit_box p{line-height:1em;} .page_0202_7 .b_inner .b_cont_box .card_wrap .tit_box p span{margin:0;} .page_0202_8 .b_inner .b_cont_box .row_flex{max-width:1280px; margin: 50px auto; display: flex; flex-flow:row wrap; justify-content: space-between; gap: 20px; align-items: flex-start;} .page_0202_8 .b_inner .b_cont_box .txt_box{display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: flex-start; gap:30px;} .page_0202_8 .b_inner .b_cont_box .txt_box .label p{display:inline-block; padding:6px 16px; background-color: #fff; border-radius: 20px; border:1px solid #48BFEE;} .page_0202_8 .b_inner .b_cont_box .txt_list{margin:20px 0 30px 0;} .page_0202_8 .b_inner .b_cont_box .txt_list.li2{margin:0;} .page_0202_8 .b_inner .b_cont_box .txt_list p{margin-bottom:10px; padding-left:40px; background: url('/img/sub/0202/viroo_sec08_icon_check.png') no-repeat 0px 50%; background-size: 20px auto;} .page_0202_8 .b_inner .b_cont_box .txt_box .img_txt{display: flex; flex-flow:row nowrap; align-items: center; justify-content: flex-start; gap:10px;} .page_0202_9{color:#fff;background: #000;} .page_0202_9 .b_inner .b_cont_box .row_flex{ max-width:1280px; margin: 0 auto; display: flex; flex-flow:row nowrap; justify-content: center; gap: 30px; align-items: flex-start;} .page_0202_9 .b_inner .b_cont_box .row_flex .players{height:700px; display: flex; flex-flow:column; justify-content: flex-start; align-items: center; gap:30px; width:30%; text-align: center;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box .fs_18{margin-top:20px; height:fit-content; padding:0 10px; color:#626262;} .page_0202_9 .b_inner .b_cont_box .row_flex .players>.txt_box:first-child{background-color: #191919; padding:20px; border-radius:16px; width:100%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box .fs_18.line_5{min-height:110px;} .page_0202_9 .b_inner .b_cont_box .row_flex .players img{width:100%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .btn_wrap{width:100%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .btn_wrap a{transition:all 0.3s; background-color: #48BFEE; color:#fff; padding:20px 0; border:1px solid #48BFEE; text-align: center; border-radius: 10px; display: block; width:100%; } .page_0202_9 .b_inner .b_cont_box .row_flex .players .btn_wrap a:hover{ background-color: #fff; color:#48BFEE;} .page_0202_10 .b_inner .b_cont_box .row_flex{ max-width:1280px; margin: 0 auto; display: flex; flex-flow:row wrap; justify-content: center; align-items: center; gap:40px;} .page_0202_10 .b_inner .b_cont_box .row_flex .img_box{width:48%; position:relative;} .page_0202_10 .b_inner .b_cont_box .row_flex .img_box p{color:#fff; position:absolute; bottom:10%; left:50%; transform: translateX(-50%);} .page_0202_10 .b_inner .b_cont_box .row_flex .img_box img{width:100%;} .page_0202_11 .b_inner .b_cont_box .row_flex{ max-width:1280px; margin: 0 auto; display: flex; flex-flow:row wrap; justify-content: center; align-items: center; gap:20px;} .page_0202_11 .b_inner .b_cont_box .row_flex .img_box{width:30%; background-color: #ececec; aspect-ratio: 5 / 3; height: auto; border-radius: 10px; overflow: hidden;} .page_0202_11 .b_inner .b_cont_box .row_flex .img_box iframe{height:100%; width:100%;} .page_0202_12{padding-top:0;} .page_0202_12 .b_inner .b_tit_box{border-top:1px solid #d0d0d0; border-bottom:1px solid #d0d0d0;} .page_0202_12 .b_inner .b_tit_box a{display: inline-block; padding:16px 0; text-align: center; width:20%; max-width:140px;} .page_0202_12 .b_inner .b_tit_box a.c_blue{border-bottom:2px solid #48BFEE; font-weight: 600;} .page_0202_12 .b_inner .b_cont_box .row_flex{max-width:1280px; margin: 120px auto; display: flex; flex-flow:row wrap; justify-content: space-between; gap: 20px; align-items: center;} .page_0202_12 .b_inner .b_cont_box .row_flex.rev{flex-flow: row-reverse;} .page_0202_12 .b_inner .b_cont_box .row_flex img{width:50%;} .page_0202_12 .b_inner .b_cont_box .viroo_list{display: none;} .page_0202_12 .b_inner .b_cont_box .viroo_list.on{display: flex;} .page_0202_12 .b_inner .b_cont_box .txt_box{ width:45%; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: flex-start; gap:30px;} .page_0202_12 .b_inner .b_cont_box .txt_box .label p{display:inline-block; padding:6px 16px; background-color: #fff; border-radius: 20px; border:1px solid #48BFEE;} .page_0202_12 .b_inner .b_cont_box .txt_list p.fw_m{color:#626262; margin-top:10px;} @media screen and (max-width:1280px) { .page_0202_3 .b_inner .b_cont_box .txt_wrap>div{padding:15px 0;} .page_0202_6 .b_inner .b_cont_box .card_wrap .txt_box .line_5{min-height:110px;} } @media screen and (max-width:1080px){ .b_sv_box_vir .b_inner .b_navi_box{display: block;} .b_sv_box_vir .b_inner .b_navi_box ul li a{width:140px;padding:10px 0; border-radius:4px;} .page_0202_3 .b_inner .b_cont_box .row_flex{flex-flow:row wrap;} .page_0202_3 .b_inner .b_cont_box .txt_wrap{flex:none ;width:100%;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div{justify-content: center;} .page_0202_5 .b_inner .b_cont_box .card_wrap .txt_box .line_5{min-height:65px;} .page_0202_6 .b_inner .b_cont_box .card_wrap{padding:20px;} .page_0202_7 .b_inner .b_cont_box .card_wrap{width:45%;} .page_0202_7 .b_inner .b_cont_box .card_wrap .txt_box p{min-height:100px;} .page_0202_8 .b_inner .b_cont_box .row_flex{flex-flow:column; justify-content: flex-start; gap: 20px; align-items: center;} .page_0202_8 .b_inner .b_cont_box .row_flex .txt_box,.page_0202_8 .b_inner .b_cont_box .row_flex>img{width:70%;} .page_0202_9 .b_inner .b_cont_box .row_flex{flex-flow:column nowrap; gap:50px;} .page_0202_9 .b_inner .b_cont_box .row_flex .players{width:80%; margin:0 auto; height:fit-content;flex-flow:row wrap; align-items: center; justify-content: center; gap:10px; } .page_0202_9 .b_inner .b_cont_box .row_flex .players img{width:48%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box{width: 48%; display:flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; gap:10px; height:max-content;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box:first-child{width:100%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box .fs_18{margin-top:0px;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box .fs_18.line_5{min-height: fit-content;} .page_0202_10 .b_inner .b_cont_box .row_flex{gap:20px} .page_0202_10 .b_inner .b_cont_box .row_flex .img_box{width:45%;} .page_0202_11 .b_inner .b_cont_box .row_flex{gap:10px;} .page_0202_11 .b_inner .b_cont_box .row_flex .img_box{width:48%;} } @media screen and (max-width:830px) { .page_0202_2 .b_inner .b_cont_box .row_flex .img_box .btn_wrap a{margin-bottom:15px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap .icon_cir{width:40px;} .page_0202_4 .b_inner .b_cont_box .row_flex{flex-flow:column nowrap;} .page_0202_4 .b_inner .b_cont_box .card_wrap{flex:none; width:80%; display: flex; flex-flow:row wrap; align-items: center; justify-content: space-between;} .page_0202_4 .b_inner .b_cont_box .card_wrap img{width:40%;} .page_0202_4 .b_inner .b_cont_box .card_wrap .txt_box{width:55%; margin:0;} .page_0202_4 .b_inner .b_cont_box .txt_wrap{flex:none; width:80%;} .page_0202_4 .b_inner .b_cont_box .txt_wrap .txt_box{padding:20px 0;} .page_0202_5 .b_inner .b_cont_box .row_flex{flex-flow:column; align-items: center;} .page_0202_5 .b_inner .b_cont_box .card_wrap{width:80%;} .page_0202_6 .b_inner .b_cont_box .row_flex{flex-flow:column;align-items: center;} .page_0202_6 .b_inner .b_cont_box .row_flex .card_wrap{width:80%; max-width:none;aspect-ratio: 1 / 1 !important;} .page_0202_6 .b_inner .b_cont_box .card_wrap .txt_box .line_5{min-height:0;} .page_0202_8 .b_inner .b_cont_box .row_flex .txt_box, .page_0202_8 .b_inner .b_cont_box .row_flex>img{width:80%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .btn_wrap a{font-size:16px;padding:12px 0;} .page_0202_12 .b_inner .b_cont_box .row_flex{flex-flow:column wrap; justify-content: center;} .page_0202_12 .b_inner .b_cont_box .row_flex.rev{flex-flow: column;} .page_0202_12 .b_inner .b_cont_box .row_flex img {width:90%;} .page_0202_12 .b_inner .b_cont_box .txt_box{ width:90%;} } @media screen and (max-width:500px) { .b_sv_box_vir .b_inner .b_navi_box ul li a{width:100px} .page_0202_1 .b_inner .b_tit_box .b_cont_box{width:100%;} .page_0202_1 .b_inner .b_tit_box .b_cont_box video{width: 101%;} .page_0202_2 .b_inner .b_cont_box .row_flex{flex-flow: column nowrap; justify-content: center; gap:20px;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box{width: 90%;} .page_0202_2 .b_inner .b_cont_box .row_flex .img_box .btn_wrap a{margin-bottom:30px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap{gap:0px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div .txt_box p.fs_18{margin-top:10px;} .page_0202_3 .b_inner .b_cont_box .txt_wrap>div,.page_0202_3 .b_inner .b_cont_box .row_flex{gap:10px;} .page_0202_3 .b_inner .b_cont_box .img_wrap{gap:10px;} .page_0202_4 .b_inner .b_cont_box .card_wrap{width:90%; border-radius: 10px; padding:10px;} .page_0202_4 .b_inner .b_cont_box .txt_wrap{width:90%;} .page_0202_4 .b_inner .b_cont_box .card_wrap .txt_box{gap:3px;} .page_0202_5 .b_inner .b_cont_box .card_wrap{width:90%; border-radius: 10px; padding:20px;} .page_0202_5 .b_inner .b_cont_box .card_wrap .txt_box .line_5{min-height:40px ;} .page_0202_5 .b_inner .b_cont_box .card_wrap .btn_wrap a{font-size: 12px;} .page_0202_6 .b_inner .b_cont_box .row_flex .card_wrap{width:90%; padding:20px; aspect-ratio: none !important;} .page_0202_7 .b_inner .b_cont_box .card_wrap{width:90%; aspect-ratio: inherit !important;} .page_0202_7 .b_inner .b_cont_box .card_wrap .tit_box img{width:40px;} .page_0202_7 .b_inner .b_cont_box .card_wrap .txt_box p{min-height: 0;} .page_0202_8 .b_inner .b_cont_box .row_flex .txt_box{width:90%; gap:15px;} .page_0202_8 .b_inner .b_cont_box .row_flex>img{width:90%;} .page_0202_8 .b_inner .b_cont_box .row_flex .txt_box .img_txt img{width:30px;} .page_0202_8 .b_inner .b_cont_box .txt_list{margin:0;} .page_0202_8 .b_inner .b_cont_box .txt_list p{background-size:16px auto; padding-left:30px;} .page_0202_9 .b_inner .b_cont_box .row_flex .players{width:90%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players img{width:100%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box{width:100%;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .txt_box:first-child{padding:12px;} .page_0202_9 .b_inner .b_cont_box .row_flex .players .btn_wrap a{width:50%; margin:0 auto; font-size:14px;} .page_0202_10 .b_inner .b_cont_box .row_flex .img_box{width:90%;} .page_0202_11 .b_inner .b_cont_box .row_flex .img_box{width:90%;} .page_0202_12 .b_inner .b_cont_box .row_flex{margin:0px auto;} .page_0202_12 .b_inner .b_cont_box .txt_box{gap:15px;} } /*----- Virtualware - SIMUMATIK 시무매틱 페이지 ------*/ .c_simu{color:#74B800;} .page_0202_simu{background-color:#202124; color:#f0f0f0;} .page_0202_simu .b_tit_txt{color:#fff;} .page_0202_simu .row_flex{ max-width:1280px; margin: 0 auto; display: flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;} .page_0202_simu.page_0202_1 .b_inner .b_tit_box .b_cont_box{aspect-ratio: inherit;} .page_0202_simu.page_0202_1 .row_flex img,.page_0202_simu.page_0202_1 .row_flex .txt_box{width:48%;} .page_0202_simu.page_0202_1 .row_flex .txt_box{display:flex; flex-flow: column; gap:40px; justify-content: space-between; align-items: flex-start; margin-top:14px; text-align: left;} .page_0202_simu.page_0202_1 .btn_wrap a{transition:all 0.3s; background-color: #fff; padding:10px 15px; width:fit-content; min-width:180px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap:20px; text-align: center; border-radius: 5px;} .page_0202_simu.page_0202_1 .btn_wrap a img{height:100%; width:auto;} .page_0202_simu.page_0202_tap{padding-bottom:1px;} .page_0202_simu.page_0202_tap .b_inner .b_tit_box{border-top:1px solid #4e4e4e; border-bottom:1px solid #4e4e4e;} .page_0202_simu.page_0202_tap .b_inner .b_tit_box a{display: inline-block; padding: 16px 0; text-align: center;color:#4e4e4e; width:30%;max-width: 450px;} .page_0202_simu.page_0202_tap .b_inner .b_tit_box a.en{width:45%} .page_0202_simu.page_0202_tap .b_inner .b_tit_box a.c_simu{font-weight:600; color:#74b800; border-bottom:2px solid #74B800;} .page_0202_simu.page_0202_12{padding-bottom:50px; padding-top:1px;} /* .page_0202_simu.page_0202_12 .b_inner .b_tit_box{border-top:1px solid #4e4e4e; border-bottom:1px solid #4e4e4e;} .page_0202_simu.page_0202_12 .b_inner .b_tit_box a{color:#4e4e4e; width:30%;max-width: 450px;} .page_0202_simu.page_0202_12 .b_inner .b_tit_box a.c_simu{font-weight:600; color:#74b800; border-bottom:2px solid #74B800;} */ .page_0202_simu.page_0202_12 .b_inner .b_cont_box .b_tit_txt, .page_0202_simu.page_0202_12 .b_inner .b_cont_box .b_cont_txt{width:100%; text-align: center;margin: 20px auto;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .txt_list{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;gap:20px;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .txt_list p.fw_m{width:48%; color:#f0f0f0; padding-left:40px; background: url('/img/sub/0202/simu_icon_check.png') no-repeat 0px 50%; background-size: 20px auto;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .col_box{width:30%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap:20px; } .page_0202_simu.page_0202_12 .b_inner .b_cont_box .col_box img{width: 100%;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .col_box .txt_box{width:100%; gap:10px;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .col_box .txt_box p{margin-bottom:10px; width: 100%; text-align: center;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .col_box .txt_box p.line_5{min-height:140px;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .row_flex .txt_box .btn_wrap a{transition: all 0.3s;background-color: #fff; padding:10px 15px; width:fit-content; min-width:160px; display: inline-block; text-align: center; border-radius: 5px;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .txt_list p.w_100{width:100%;} .page_0202_simu.page_0202_13, .page_0202_simu.page_0202_15{padding:50px 0; background-color: #74B800;} .page_0202_simu.page_0202_13 .b_tit_txt, .page_0202_simu.page_0202_13 .b_cont_box{color:#171719;} .page_0202_simu.page_0202_13 .b_inner .b_cont_box .row_flex{max-width: 1280px; margin: 70px auto 0 auto; display: flex ; flex-flow: row wrap; justify-content: space-between; gap: 20px; align-items: center;} .page_0202_simu.page_0202_13 .b_inner .b_cont_box .col_box{width:30%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap:20px; } .page_0202_simu.page_0202_13 .b_inner .b_cont_box .col_box img{height:130px; width:auto;} .page_0202_simu.page_0202_13 .b_inner .b_cont_box .col_box .txt_box{display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; width: 100%; gap: 10px;} .page_0202_simu.page_0202_13 .b_inner .b_cont_box .col_box .txt_box p{width: 100%; text-align: center;} .page_0202_simu.page_0202_13 .b_inner .b_cont_box .col_box .txt_box p.line_5{min-height:100px;} .page_0202_simu.page_0202_14 .b_inner .b_cont_box>div{display: flex; flex-flow:column nowrap; align-items: center; justify-content: center; gap:50px;} .page_0202_simu.page_0202_14 .b_inner .b_cont_box>div>p.fs_32{text-align: center;} .page_0202_simu.page_0202_14 .b_inner .b_cont_box .txt_list{width:40%; margin:0 auto; display: flex; flex-flow: row nowrap; align-items:center; justify-content: space-between; gap:20px;} .page_0202_simu.page_0202_14 .b_inner .b_cont_box .txt_list p.fw_m{width:fit-content; color:#f0f0f0; padding-left:40px; background: url('/img/sub/0202/simu_icon_check_white.png') no-repeat 0px 50%; background-size: 20px auto;} .page_0202_simu.page_0202_14 .btn_wrap{margin-top:50px;} .page_0202_simu.page_0202_14 .btn_wrap a{transition:all 0.3s; background-color: #fff; padding:10px 15px; width:fit-content; min-width:180px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap:20px; text-align: center; border-radius: 5px;} .page_0202_simu .btn_wrap a:hover,.page_0202_simu.page_0202_12 .b_inner .b_cont_box .row_flex .txt_box .btn_wrap a:hover{background-color: #74B800;} .page_0202_simu.page_0202_15 .b_tit_txt, .page_0202_simu.page_0202_15 .b_cont_box{color:#171719;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .txt_box {width: 45%;display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;gap: 30px;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .txt_list{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 20px;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .txt_list p.fw_m{color: #171719; padding-left: 40px; background: url(/img/sub/0202/simu_icon_check_black.png) no-repeat 0px 50%; background-size: 20px auto;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .txt_list p.w_100{width:100%;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .row_flex img{width:50%;} .page_0202_simu.page_0202_15 .btn_wrap a{transition:all 0.3s; background-color: #fff; padding:10px 15px; width:180px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; text-align: center; border-radius: 5px;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .row_flex .btn_wrap a img{height:100%; width:auto;} .indus_edu{display: none;} .indus_edu.on{display: block;} .simu_edu .page_0202_12 .b_inner .b_cont_box .sp_even{justify-content: space-evenly;} @media screen and (max-width:831px) { .page_0202_simu.page_0202_1 .row_flex{flex-flow:column-reverse; margin:0 auto; gap:20px;} .page_0202_simu.page_0202_1 .row_flex .txt_box, .page_0202_simu.page_0202_1 .row_flex>img{width: 90%;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .row_flex{flex-flow: row wrap;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .row_flex .col_box{width:45%;} .page_0202_simu.page_0202_14 .b_inner .b_cont_box .txt_list{width:60%;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .row_flex{flex-flow: row wrap;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .row_flex{gap:20px;} .page_0202_simu.page_0202_15 .b_inner .b_cont_box .row_flex .txt_box, .page_0202_simu.page_0202_15 .b_inner .b_cont_box .row_flex>img{width:90%; margin:0 auto;} .simu_edu .page_0202_12 .b_inner .b_cont_box .sp_even{justify-content: space-between; } } @media screen and (max-width:500px) { .page_0202_simu .btn_wrap a p, .page_0202_simu .btn_wrap a{font-size: 14px;} .page_0202_simu.page_0202_tap .b_inner .b_tit_box a{width:40%;} .page_0202_simu.page_0202_tap .b_inner .b_tit_box a.en{width:49%} .page_0202_12 .b_inner .b_cont_box .row_flex{margin:80px auto;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .col_box .txt_box p.line_5{min-height:80px;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .row_flex .col_box{width:90%;} .page_0202_simu.page_0202_12 .b_inner .b_cont_box .txt_list p.fw_m{width:100%;} .simu_edu .page_0202_12 .b_inner .b_cont_box .sp_even{justify-content:center;} .page_0202_simu.page_0202_13 .b_inner .b_cont_box .row_flex{justify-content: center;} .page_0202_simu.page_0202_13 .b_inner .b_cont_box .col_box {width:45%;} .page_0202_simu.page_0202_14 .b_inner .b_cont_box>div>img{width:50%;} .page_0202_simu.page_0202_14 .b_inner .b_cont_box .txt_list{width:fit-content; margin:0 auto;flex-flow: column;align-items: flex-start;} .page_0202_simu.page_0202_1 .btn_wrap a, .page_0202_simu.page_0202_12 .b_inner .b_cont_box .row_flex .txt_box .btn_wrap a, .page_0202_simu.page_0202_14 .btn_wrap a, .page_0202_simu.page_0202_15 .btn_wrap a{width:fit-content; gap:30px;} } /*----- Virtualware - GEVERNOVA 페이지 ------*/ .c_gever{color:#005E60;} .c_gever2{color:#C8FF08;} .page_0202_gever{background-color:#f5f5f5; color:#2f2f2f;} .page_0202_gever .b_tit_txt{color:#1d1d1f;} .page_0202_gever .b_tit_box p.fs_16{color:#626262;} .page_0202_gever .row_flex{width:100%; max-width:1280px; margin: 0 auto; display: flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;} .page_0202_gever.page_0202_1 .b_cont_box{display: flex; flex-flow:column nowrap; align-items: center; justify-content: center; gap:50px;} .page_0202_gever.page_0202_1 .main_img{display:inline-block; width:80%; max-width:1280px; margin:0 auto; } .page_0202_gever.page_0202_1 .b_cont_box .row_flex .txt_box{text-align: center;flex:1; padding:20px;display: flex; flex-flow:column nowrap; align-items: center; justify-content: center; gap:20px; border-right:3px solid #C8FF08;} .page_0202_gever.page_0202_1 .b_cont_box .row_flex .txt_box:last-child{border-right:none;} .page_0202_gever.page_0202_12{padding:50px 0;} .page_0202_gever.page_0202_12 .b_inner .b_tit_box{border:none;} .page_0202_gever.page_0202_12 .b_inner .b_tit_box h3{margin:20px auto;} .page_0202_gever.page_0202_12 .b_inner .b_cont_box .b_tit_txt, .page_0202_gever.page_0202_12 .b_inner .b_cont_box .b_cont_txt{width:100%; text-align: center;margin: 20px auto;} .page_0202_gever.page_0202_12 .b_inner .b_cont_box .txt_list{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;gap:20px;} .page_0202_gever.page_0202_12 .b_inner .b_cont_box .txt_list p.fw_m{color:#2f2f2f ;width:48%; padding-left:40px; background: url('/img/sub/0202/gever_icon_check.png') no-repeat 0px 50%; background-size: 20px auto;} .page_0202_gever.page_0202_12 .b_inner .b_cont_box .txt_list p.w_100{width:100%;} .page_0202_gever.page_0202_13{padding:100px 0; background-color: #005E60; color:#f0f0f0;} .page_0202_gever.page_0202_13 .b_tit_box, .page_0202_gever.page_0202_13 .b_tit_box .b_tit_txt{color:#fff;} .page_0202_gever.page_0202_13 .b_tit_box p.fs_16{color:#6DADAE;} .page_0202_gever.page_0202_13 .b_inner .b_cont_box .row_flex{max-width: 1280px; margin: 70px auto 0 auto; display: flex ; flex-flow: row wrap; justify-content: space-between; gap: 20px; align-items: center;} .page_0202_gever.page_0202_13 .b_inner .b_cont_box .col_box{width:30%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap:20px; } .page_0202_gever.page_0202_13 .b_inner .b_cont_box .col_box img{height:115px; width:auto;} .page_0202_gever.page_0202_13 .b_inner .b_cont_box .col_box .txt_box{display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; width: 100%; gap: 10px;} .page_0202_gever.page_0202_13 .b_inner .b_cont_box .col_box .txt_box p{width: 100%; text-align: center;} .page_0202_gever.page_0202_13 .b_inner .b_cont_box .col_box .txt_box p.line_5{min-height:100px;} .page_0202_gever.page_0202_15 .b_tit_txt{color:#171719;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .txt_box {width: 45%;display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;gap: 30px;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex{padding:0 0 70px 0;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex:last-child{padding: 70px 0 0 0; border-top:1px solid #D2D2D2;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex>img{width:50%;} .page_0202_gever.page_0202_15 .btn_wrap a{transition:all 0.3s; background-color: #C8FF08; padding:10px 15px; min-width:180px; width:fit-content; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; text-align: center; border-radius: 5px; gap:20px;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex .btn_wrap a img{height:100%; width:auto;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex_tit{display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:20px;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex_tit>.symbol_icon{width: 50px; height:auto;} .page_0202_gever.page_0202_16{background-color: #f0f0f0;padding:70px 0;} .page_0202_gever.page_0202_16 .b_tit_txt{color:#171719;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex{justify-content: space-between;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex>img{width:30%;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .txt_box {width: 60%;display: flex;flex-flow: column nowrap;justify-content: space-between; align-items: flex-start;gap: 40px;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .txt_box p.fw_m{color: #2f2f2f;} .page_0202_gever.page_0202_16 .btn_wrap a{transition:all 0.3s; background-color: #C8FF08; padding:10px 15px; min-width:180px; width:fit-content; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; border-radius: 5px; gap:20px;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex .btn_wrap a img{height:100%; width:auto;} .page_0202_gever.page_0202_14{background-color: #1d1d1f; padding:70px 0;} .page_0202_gever.page_0202_14 .b_tit_txt{color:#fff;} .page_0202_gever.page_0202_14 .b_cont_txt{color:#f0f0f0;} .page_0202_gever.page_0202_14 .btn_wrap{margin-top:50px;} .page_0202_gever.page_0202_14 .btn_wrap a{margin: 0 auto; transition:all 0.3s; background-color: #fff; padding:10px 15px; width:180px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; border-radius: 5px;} .page_0202_gever.page_0202_14 .btn_wrap a:hover{background-color:#C8FF08;} @media screen and (max-width:831px) { .page_0202_gever.page_0202_12 .b_inner .b_cont_box .row_flex{flex-flow: column-reverse; gap:30px; margin:80px auto;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex{flex-flow: row wrap; gap:20px;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex .txt_box, .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex>img{width:90%; margin:0 auto;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex{flex-flow:column; align-items: center; justify-content: center; gap:30px;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex .txt_box{width:80%;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex .txt_box>p{text-align: center; width:100%;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex .txt_box .btn_wrap{margin: 0 auto;} } @media screen and (max-width:500px) { .page_0202_gever.page_0202_1 .row_flex{flex-flow:column;} .page_0202_gever.page_0202_1 .b_cont_box .row_flex .txt_box{width: 90%; border-right:none; border-bottom:1px solid #C8FF08;} .page_0202_gever.page_0202_1 .b_cont_box .row_flex .txt_box:last-child{border-bottom:none;} .page_0202_gever.page_0202_13 .b_inner .b_cont_box .row_flex{justify-content: center;} .page_0202_gever.page_0202_13 .b_inner .b_cont_box .col_box{width:45%;} .page_0202_gever.page_0202_15 .b_inner .b_cont_box .row_flex_tit>.symbol_icon{width: 40px; height:auto;} .page_0202_gever.page_0202_16 .b_inner .b_cont_box .row_flex .txt_box{width:90%;} .page_0202_gever.page_0202_15 .btn_wrap a,.page_0202_gever.page_0202_16 .btn_wrap a,.page_0202_gever.page_0202_14 .btn_wrap a{min-width:0; width:fit-content; gap:30px;} .page_0202_gever.page_0202_15 .btn_wrap a p,.page_0202_gever.page_0202_16 .btn_wrap a p,.page_0202_gever.page_0202_14 .btn_wrap a p{font-size:14px;} } /*----- Virtualware - VIROO ROOM 페이지 ------*/ .c_blue2{color:#2672ff;} .viroom.page_0202_1 .b_inner .b_tit_box .b_cont_box iframe{width:100%; height:100%; border-radius: 20px;} /*----------------------------------------------------------------*/ /* 태권365 */ .c_tkd_blue{color:#2343B7;} .c_tkd_mint{color:#34BBA5;} .c_tkd_red{color:#FF0019;} .bg_tkd_blue{background-color:#2343B7 !important;} .bg_tkd_red{background-color:#FF0019 !important;} .bg_tkd_mint{background-color:#34BBA5 !important;} .page_0203_1{padding-bottom:200px;} .page_0203_1 .b_inner .b_tit_box #specs_swiper{width:100%; padding: 30px 0;} .page_0203_1 #specs_swiper .swiper-slide{padding:0;} .page_0203_1 .specs_wrap .swiper-slide figure img{max-height: 500px; width: fit-content; max-width: 100%; margin: 0 auto;} .page_0203_1 .b_inner .b_tit_box #specs_swiper .swiper-pagination-bullet{background-color:#2343B7 !important;} .page_0203_2{background:none;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul{gap:20px;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li{ padding:25px 0; width:240px; aspect-ratio: 4 / 4.5 ; display:flex; gap:30px; border-radius: 20px; background-color:#1E399C;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li:hover{background-color: #001974;} .page_0101_3 .b_bot_box figure img{opacity: 1;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li>p{color:#fff;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li>p>span{display:inline-block; margin-bottom:10px;} .fader{animation: fader 2s ease-in-out ;} @keyframes fader { 0%{background-color: #1E399C;} 50%{background-color:#001974;} 100%{background-color: #1E399C;} } @media screen and (max-width:720px) { .fader{animation: none;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li:hover{background-color:#1E399C ;} .page_0203_2 .b_bot_box ul.b_img_list li p{font-size: 16px;} .page_0203_2 .b_bot_box ul.b_img_list li p>span.fs_20{font-size: 18px;} } .page_0203_3{background-color: #fff;} .page_0203_3 .b_cont_txt{color:#8f8f93;} .page_0203_3 .b_cont_box .tab_menu{width:fit-content; justify-content: center; gap:10px;border-radius: 100px; padding: 5px; background-color: #F2F2F2; } .page_0203_3 .b_cont_box .tab_menu a{transition:all 0.3s; display: inline-block; border-radius: 50px; padding: 10px 20px;color:#838383;} .page_0203_3 .b_cont_box .tab_menu a.on{font-weight:600; background-color: #000; color:#fff;} .page_0203_3 .b_cont_box .tab_menu a:hover{color:#000; background-color: #00000010;} .page_0203_3 .b_cont_box .tkd_cont{width:100%; margin:0 auto; max-width:1200px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap:50px; display: none;} .page_0203_3 .b_cont_box .tkd_cont.on{display: flex;} .page_0203_3 .b_cont_box .tkd_cont>img{width:49%; height:auto;} .page_0203_3 .b_cont_box .tkd_cont>div{flex:1; display: flex; flex-flow: column; align-items: flex-start; justify-content: flex-start; gap:30px;} .page_0203_3 .b_cont_box .tkd_cont>div>.fw_m{color:#707174;} .page_0203_3 .b_inner .b_tit_box .b_sub_txt,.page_0203_4 .b_inner .b_tit_box .b_sub_txt{width:fit-content; margin:0px auto 20px auto; padding: 5px 15px; border-radius: 50px; background-color: #E5EBFF;} .page_0203_4{background-color:#F5F5F7;} .page_0203_4 .b_cont_box{display: flex;align-items: center;justify-content: center;max-width: 1360px;margin: 0 auto;width: 100%;position: relative;} .page_0203_4 .b_img_box{width:70%; height:500px;} .page_0203_4 .b_img_box ul{width:100%; position:relative; height:100%;} .page_0203_4 .b_img_box ul li{height:100%; opacity:0;position:absolute; top:0; left:0; background-color:#fff; border-radius: 20px; width:100%; aspect-ratio: inherit; display:flex; flex-flow:row wrap; align-items: center; justify-content: center; gap:0px 30px; padding:20px 30px;} .page_0203_4 .b_img_box ul li:first-child{opacity: 1;} .page_0203_4 .b_img_box li.b_img_01{z-index:1;} .page_0203_4 .b_img_box li.b_img_02{z-index:3;} .page_0203_4 .b_img_box li.b_img_03{z-index:5;} .page_0203_4 .b_img_box .title_box{width:100%;} .page_0203_4 .b_img_box .title_box>p{margin:10px auto; width:fit-content;} .page_0203_4 .b_img_box .title_box>p.fw_b{ padding:5px 15px; background-color: #34BBA5; color:#fff; border-radius: 50px;;} .page_0203_4 .b_img_box li figure{flex:1;text-align: right;} .page_0203_4 .b_img_box li img{flex:1; height:300px; width:auto;} .page_0203_4 .b_img_box .txt_box{flex:1; height: auto;} .page_0203_4 .b_img_box .txt_box p{margin:10px 0; color:#707174; position:relative; padding-left:30px;} .page_0203_4 .b_img_box .txt_box p::before{content:""; background-color:#34BBA5; width:5px; height:5px; border-radius: 50px; position:absolute; left:0; top:10px; } .page_0203_4 .b_img_box .txt_box.red p::before{background-color:#FF0019;} .page_0203_4 .b_img_box .txt_box.blue p::before{background-color:#2343B7 ;} .page_0203_5{color:#1d1d1f; background-color: #fff;} .page_0203_5 .b_tit_box span{border:1px solid #00000080; width:70px; display:inline-block; margin:30px auto 20px auto;} .page_0203_5 .tkd_inq{margin:0 auto; max-width:1280px;width:100%;} .page_0203_5 .tkd_inq label{margin: 25px auto; width:100%; display:flex; flex-flow:column nowrap; align-items: flex-start; justify-content: flex-start; gap:15px;} .page_0203_5 .tkd_inq label.file{flex-flow:row nowrap} .page_0203_5 .tkd_inq label input, .page_0203_5 .tkd_inq label textarea{width:100%; outline:none; background-color: transparent; border:1px solid #707174; border-radius: 2px; padding:10px 15px; font-size:18px; color:#1d1d1f;} .page_0203_5 .tkd_inq label textarea{resize: none; height:300px;} .page_0203_5 .tkd_inq label input:invalid{border:1px solid #FF7373;} .page_0203_5 .tkd_inq label div{position:relative; width:19%; height:100%;} .page_0203_5 .tkd_inq label div p.fs_18{padding:10px 10px;width: 100%; min-width:140px; text-align: center; background-color: #ececec; border:1px solid #707174; border-radius: 2px; color:#1d1d1f;} .page_0203_5 .tkd_inq label input[type="text"].file_name{width:80%; cursor:default;} .page_0203_5 .tkd_inq label input[type="file"]{cursor: pointer; opacity: 0; position:absolute;top:0;left:0; border:1px solid blue;width:100%;height:100%;} .page_0203_5 .tkd_inq label input[type="file"]::-webkit-file-upload-button{cursor: pointer;} .page_0203_5 .tkd_inq button.send_btn{margin: 0 auto; margin-top:100px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:15px; padding:10px 20px; width:170px; height:60px; border-radius: 5px; background-color: #193898; color:#ffffff;} .page_0203_5 .tkd_inq button.send_btn img{width:20px; height:auto;} @media screen and (max-width:768px) { .page_0203_5 .tkd_inq label .fs_20{font-size: 14px;} .page_0203_5 .tkd_inq label input{font-size: 14px;} .page_0203_5 .tkd_inq label div p.fs_18{min-width:80px; font-size:14px;} .page_0203_5 .tkd_inq label textarea{height:100px;} .page_0203_5 .tkd_inq button.send_btn{margin-top:50px; width:145px; height:45px;} .page_0203_5 .tkd_inq button.send_btn p{font-size:16px;} .page_0203_5 .tkd_inq label div{width:30%;} .page_0203_5 .tkd_inq label input[type="text"].file_name{width:69%; cursor:default;} } .page_0203_f.b_banner_sec{padding:0;width: 100%; position:relative;aspect-ratio: 3.2 / 1;} .page_0203_f .b_box_03{background: url(/img/sub/0203/tkd365_footer_bg.png) no-repeat bottom center; background-size: 100% auto; height: 100%; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; overflow: hidden; background-color:#f5f5f5;} .page_0203_f .b_box_03 .tkd_f{position:absolute; top:50%; left:70%; transform: translate(-50%,-50%);} .page_0203_f .b_box_03 p{color:#fff; width: max-content; margin:25px 0 45px; text-align: left;} .page_0203_f .b_box_03 .b_more_btn{margin:0; color:#fff; border:none; width:240px;} .page_0203_f .b_box_03 .b_more_btn figure{background-color:#ffffff60;} @media screen and (max-width:1281px) { .page_0203_f .b_box_03 p{margin:25px 0 25px;} .page_0203_f .b_box_03 .b_more_btn{padding:5px 5px 5px 30px;width: 180px; height: 60.5px;} } @media screen and (max-width:1080px) { .page_0203_2 .b_inner .b_cont_box .b_bot_box ul{flex-flow:row wrap;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul{justify-content: center;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li{width:48%; max-width:300px;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li>p>span{font-size:18px;} .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li>p.fs_16{font-size:16px;} .page_0203_2 .b_bot_box figure img{height:120px;} .page_0203_4 .b_img_box{width:90%;}; .page_0203_4 .b_img_box li{gap:0 50px;} } @media screen and (max-width:880px) { .page_0203_3 .b_cont_box .tkd_cont{flex-direction: column-reverse; gap:20px;} .page_0203_3 .b_cont_box .tkd_cont>img{width:80%;} .page_0203_3 .b_cont_box .tkd_cont>div{width:80%;} .page_0203_4 .b_img_box{height:640px;} .page_0203_4 .b_img_box ul li{flex-flow:column; gap:20px;} .page_0203_4 .b_img_box li img{height:200px;} .page_0203_f .b_box_03 .tkd_f p.fs_42{font-size: 30px;} .page_0203_f .b_box_03 .tkd_f p span.fs_48{font-size: 34px;} .page_0203_f .b_box_03 .b_more_btn{width: 150px; height: 44.5px; padding: 5px 5px 5px 15px; } .page_0203_f .b_box_03 .b_more_btn figure{width:34.5px;} .page_0203_f .b_box_03 .b_more_btn figure img{width:20px;} .br_880{display: none;} } @media screen and (max-width: 720px){ .page_0203_2 .b_inner .b_cont_box .b_bot_box ul>li{width:240px;} .page_0203_2 .b_bot_box figure img{height:90px;} .page_0203_3 .b_cont_box .tab_menu{padding:2px;} .page_0203_3 .b_cont_box .tab_menu a{padding:7px 15px;} .page_0203_f .b_box_03{background: url(/img/sub/0203/tkd365_footer_bg_mo.png) no-repeat bottom center; background-size: 100% 100%;} .page_0203_f.b_banner_sec{ aspect-ratio: 1.23 / 1 ;} .page_0203_f .b_box_03 .tkd_f{left:50%; top:25%; } .page_0203_f .b_box_03 .tkd_f p{text-align: center; margin-bottom:15px;} .page_0203_f .b_box_03 .tkd_f p.fs_42{font-size: 26px;} .page_0203_f .b_box_03 .tkd_f p span.fs_48{font-size: 28px;} .page_0203_f .b_box_03 .b_more_btn{margin:0 auto; width: 120px; height: 34.5px; padding: 0px 6px 0px 15px; } .page_0203_f .b_box_03 .b_more_btn figure{width:25px;} .page_0203_f .b_box_03 .b_more_btn figure img{width:10px;} } /*---------------------------------------------------------------------------*/ /*핵심간호술기*/ .c_teal{color:#0AB6AD !important;} .bg_teal{background-color: #0AB6AD;} .bg_purple_b{background-color: #7C3FFF !important;} .page_0401_1{background-color: #f5f5f5; padding-top:50px ; padding-bottom:200px} .page_0401_1 .b_cont_box {flex-direction: column; gap:50px;} .page_0401_2 {padding-top:0px; padding-bottom: 150px;text-align: center;} .page_0401_2 h3{margin-bottom: 50px;} /* 탭 버튼 스타일 */ .tab_menu {display: flex;justify-content: space-between; gap:50px; padding: 10px 0; position: relative; max-width: 1200px; width:100%; margin: 0 auto 50px;} /* _en 영문 페이지 css */ .page_0401_en.page_0401_2 .tab_menu{ gap: 40px;} .tab_btn {flex: 1; text-align: center; border-radius: 30px; border:1px solid #0AB6AD; color: #0AB6AD; padding: 10px 10px; cursor: pointer; transition: color 0.3s, font-weight 0.3s;} .tab_btn.active {color: #fff; background-color: #0AB6AD; font-weight: bold; position: relative;} /* 탭 콘텐츠 스타일 */ .tab_content {margin-top: 20px; text-align: center;} .tab_item {display: none;} .tab_item video { width: 100%; max-width: 1200px; border-radius: 15px; border: 2px solid #ddd; padding: 15px; background-color: #f0f0f0;} @media screen and (max-width:720px) { .page_0401_1 {padding-bottom: 100px;} .tab_menu {margin:0 auto 30px; gap:10px;} /* _en 영문 페이지 css */ .page_0401_en.page_0401_2 .tab_menu{flex-flow:column nowrap; gap: 10px;} .tab_btn{padding:10px 0;} } .page_0401_3 { background: url(/img/sub/0401/mrware_sec03_bg.png) top center / cover; background-color: #f5f5f5; overflow: hidden; padding-bottom:100px;} .page_0401_3 .b_tit_box{color: #fff;} .page_0401_3 .b_tit_box figure{ width:80%; margin: 0 auto; margin-top:100px;} .page_0401_3 .b_tit_box figure img{width:100%;} .page_0401_3 .b_top_box{display: flex; align-items: center ; justify-content: center; margin-bottom: 60px;} .page_0401_3 .b_top_box figure{border-radius: 15px; overflow: hidden;} .page_0401_3 .b_top_box img{display: block; max-width: 100%;} .page_0401_3 .b_bot_box {margin:100px auto; height: fit-content; position: relative; display:flex; flex-flow: column; gap:20px; align-items:center; justify-content: center;} .page_0401_3 .b_bot_box ul{display: flex; align-items: center; margin:0 auto;} .page_0401_3 .b_bot_box ul.b_text_list{height:100px; gap:40px; color:#fff; text-align: center;position:relative;} .page_0401_3 .b_bot_box ul.b_text_list li{ width:245px; color:#ffffff50;} .page_0401_3 .b_bot_box ul.b_text_list li.on{color:#fff;} .page_0401_3 .b_bot_box ul.b_text_list p{word-break: keep-all;} .page_0401_3 .b_bot_box ul.b_img_list{gap:60px;} .page_0401_3 .b_bot_box ul.b_img_list li{transition:all 0.5s ease; padding-top:25px;display:flex; flex-flow: column; gap:40px; align-items: center; justify-content: center; text-align: center; color:#00000040; aspect-ratio: 1 / 1;width: 220px; display: block; border-radius: 300px; background-color: #fff;} .page_0401_3 .b_bot_box ul.b_img_list li.on{background-color:#1D1D1F ; color:#fff;} .page_0401_3 .b_bot_box ul.b_img_list li p{margin-top:10px;} .page_0401_3 .b_bot_box figure{width: 100%;} .page_0401_3 .b_bot_box ul.b_img_list li.on img{opacity:1;} .page_0401_3 .b_bot_box figure img{transition:all 0.5s ease; display: block; opacity:0.5; height: 120px; margin:0px auto;} @media screen and (max-width: 830px){ .page_0401_3 .b_bot_box ul.b_text_list li{ width:200px;} .page_0401_3 .b_bot_box ul.b_img_list{gap:40px;} .page_0401_3 .b_bot_box ul.b_img_list li{width:200px;} .page_0401_3 .b_bot_box figure img{height:100px;} } @media screen and (max-width: 720px){ .page_0401_3 .b_tit_box .b_cont_txt {margin-top: 10px;} .page_0401_3 .b_top_box{margin-bottom: 30px;} .page_0401_3 .b_bot_box {margin:40px auto; gap:20px; height: max-content;} .page_0401_3 .b_bot_box ul{gap: 15px;} .page_0401_3 .b_bot_box ul.b_img_list{border:none; height:200px;} .page_0401_3 .b_bot_box ul.b_img_list li{transition:none; background-color:#1D1D1F ; color:#fff; display: none; position:absolute; left:50%;top:0%; transform: translateX(-50%);border:none;} .page_0401_3 .b_bot_box ul.b_img_list li.on{display:block; background-color:#1D1D1F ; color:#fff;} .page_0401_3 .b_bot_box ul.b_img_list li p{font-size: 22px;} .page_0401_3 .b_bot_box ul.b_text_list li{display: none;color:#fff; position:absolute; left:50%;top:50%; transform: translate(-50%,-50%);} .page_0401_3 .b_bot_box ul.b_text_list li.on{display: block;} .page_0401_3 .b_bot_box ul.b_text_list li p{font-size:20px;} .page_0401_3 .b_bot_box figure img{transition:none; opacity:1;} } .page_0401_4{background-color: #f5f5f5;} .page_0401_4 .b_cont_box{display: flex; align-items: center; max-width: 1360px; margin:0 auto; width:100%; position: relative; justify-content: space-between;} .page_0401_4 .b_img_box{width: 50%; aspect-ratio: 10 / 8;} .page_0401_4 .b_img_box ul{position: relative;} .page_0401_4 .b_img_box li {position: absolute; left: 0; top: 0; opacity: 0;} .page_0401_4 .b_img_box li figure{width: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box;} .page_0401_4 .b_img_box li figure img{display: block; max-width: 100%;} .page_0401_4 .b_img_box li.b_img_01{opacity: 1; z-index: 1;} .page_0401_4 .b_img_box li.b_img_02 {z-index: 3;} .page_0401_4 .b_img_box li.b_img_03 {z-index: 5;} .page_0401_4 .b_txt_box {width: 47%;} .page_0401_4 .b_txt_box li {padding:20px 0px 20px 15px ; border-bottom:1px solid #d9d9d9; } .page_0401_4 .b_txt_box li:last-child{border-bottom: 0;} .page_0401_4 .b_txt_box .b_num{display:inline-block; color: #7C3FFF30;padding:6px 0;} .page_0401_4 .b_txt_box .b_txt_02 .b_num{color:#0AB6AD30;} .page_0401_4 .b_txt_box .b_cont{margin-top: 15px; color:#8F8F9330; word-break: keep-all;} .page_0401_4 .b_txt_box li.b_img_01 .b_num{ color:#fff; opacity:1;} .page_0401_4 .b_txt_box li.b_img_01 .b_cont{color:#8F8F93;} @media screen and (max-width: 1080px){ .page_0401_4 .b_tit_box{margin-bottom: 50px;} .page_0401_4 .b_txt_box li {padding: 20px 0;} .page_0401_4 .b_txt_box .b_cont {margin-top: 12px;} .page_0401_4 .b_box_03{height: 500px;padding-top: 40px;} } @media screen and (max-width: 980px){ .page_0401_4 .b_cont_box{flex-direction: column-reverse; justify-content: center;} .page_0401_4 .b_txt_box {width: 100%; max-width: 560px; height:120px;} .page_0401_4 .b_img_box {width: 100%; max-width: 560px;} .page_0401_4 .b_img_box ul{height: 100%;} .page_0401_4 .b_img_box li{left: 50%; transform: translateX(-50%); max-width: 560px; width: 100%;} .page_0401_4 .b_txt_box ul{height: 100px; position: relative; margin-bottom:10px;} .page_0401_4 .b_txt_box li{position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; border-bottom: 0; background-color: #f5f5f5; padding: 20px 10px;} .page_0401_4 .b_txt_box li.b_txt_01{opacity: 1; z-index: 1;} .page_0401_4 .b_txt_box li.b_txt_02{z-index: 3;} .page_0401_4 .b_txt_box li.b_txt_03{z-index: 5;} .page_0401_4 .b_txt_box .b_num{color: #7C3FFF;} .page_0401_4 .b_txt_box .b_txt_02 .b_num{color:#0AB6AD;} .page_0401_4 .b_txt_box li .b_cont{color:#1D1D1F;} } @media screen and (max-width: 720px){ .page_0401_4 .b_txt_box .b_cont{margin-top: 10px;} .page_0401_4 .b_txt_box ul{height: 90px; } .page_0401_4 .b_img_box li figure{border-radius: 7.5px;} .page_0401_4 .b_box_03{height: 345.8px;} .page_0401_4 .b_box_03 .b_more_btn{width: 100px; height: 34.5px; padding: 6px 0;} } .page_0401_5.sub_page {overflow: hidden; height:700px; padding-bottom:200px;} .page_0401_5 .b_logo_list {display: flex; align-items: center; padding:0 20px; gap: 60px; animation-name: to_left; animation-duration: 20s;animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; bottom:-100px;} .page_0401_5 .b_tit_box {margin-bottom: 100px;} @media screen and (max-width:860px) { .page_0401_5.sub_page {height:440px;padding:0px;margin-bottom: 0!important;} .page_0401_5 .b_logo_list{gap:20px; bottom:-40px; } .page_0401_5 .b_cont_box figure img{width:140px; height:auto;} } .page_0401_6{background-color: #fff;} .page_0401_6 .nurs_web_wrap { display: flex; align-items: center; justify-content: center; gap: 100px;} .nurs_web_img{border-radius: 10px;margin-bottom: 35px; width:100%;} .page_0401_6 .nurs_web_box {display: flex; flex-direction: column;} .page_0401_6 .b_more_btn {margin-bottom:20px;background-color: #000; color: #fff;} .page_0401_6 .b_more_btn figure{background-color:#fff;} .page_0401_6 .b_more_btn figure img{filter: invert(1);} @media screen and (max-width: 720px) { .page_0401_6 .nurs_web_wrap{flex-direction: column;} .page_0401_6 .b_more_btn{width:160px;} .page_f9{padding:100px 0;} } .page_0401_7 .b_inner #globe_swiper2{padding:10px 5px;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide{width:fit-content; display: flex; flex-flow:row nowrap; align-items: center; justify-content: center;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap{width:fit-content;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide{border-radius: 20px; width:210px; height:280px; box-shadow: 0 0 10px 1px #1D1D1F20; padding-left:20px; display: flex; flex-flow:column nowrap; justify-content: center;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide.bg_black{background-color:#1D1D1F; color:#fff;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide.bg_white{background-color:#fff; color:#1D1D1F;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide.bg_teal2{background-color:#0AB6AD; color:#fff;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide.bg_purple2{background-color:#7C3FFF; color:#fff;} .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide p{font-size: 2rem;} /* fs_36 사이즈 */ @media screen and (max-width:860px) { .page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide p{font-size:32px;} /* 영문페이지 특정 css */ .page_0401_en.page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide p.fs_32{font-size: 2.25rem;}/* .fs_36과 같은 사이즈 */ .page_0401_en.page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide span.pc, .page_0401_en.page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide br.pc{display: inline;} } @media screen and (max-width:720px) { /* 영문페이지 특정 css */ .page_0401_en.page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide span.pc, .page_0401_en.page_0401_7 .b_inner #globe_swiper2 .swiper-slide .cert_wrap .card_slide br.pc{display: none;} } .page_0401_8.b_sub_sec{background-color: #f5f5f5;} .page_0401_8 .b_inner .b_cont_box{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap:30px;} .page_0401_8 .b_inner .b_cont_box ul{width:270px; position:relative; display: flex; flex-flow:column nowrap; align-items: center; justify-content: center; gap:20px;} .page_0401_8 .b_inner .b_cont_box ul li{display:flex; flex-flow:row nowrap; align-items: center; justify-content: flex-start; border-radius: 15px; width:100%; height:70px;padding:10px 0; background-color: #fff; padding-left:20px;} .page_0401_8 .b_inner .b_cont_box ul li p{color:#8F8F93;} .page_0401_8 .b_inner .b_cont_box ul li p span.br{margin-left:22px;} .page_0401_8 .b_inner .b_cont_box ul .badge{position:absolute; left:100%; bottom:60px; transform:translateX(-50%); width:140px; height:auto;} .page_0401_8 .b_inner .b_cont_box ul li.new{border:2px solid #0AB6AD;} .page_0401_en.page_0401_8 .b_inner .b_cont_box ul .badge{position:absolute; left:100%; bottom:60px; transform:translateX(-30%); width:140px; height:auto;} @media screen and (max-width:860px) { .page_0401_8 .b_inner .b_cont_box ul{display: none;} .page_0401_8 .b_inner .b_cont_box ul:last-child{display: flex;} .page_0401_8 .b_inner .b_cont_box ul li p{font-size: 16px;} .page_0401_8 .b_inner .b_cont_box ul .badge{width:120px; left:95%;bottom:65px;} .page_0401_en.page_0401_8 .b_inner .b_cont_box ul .badge{width:120px; left:100%; bottom:65px; transform:translateX(-50%);} } .page_0401_f.b_banner_sec{padding:0;width: 100%;} .page_0401_f .b_box_03{background: url(/img/sub/0401/mrware_footer_bg.png) no-repeat center; background-size: cover; height: 400px; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; padding-top:0px; overflow: hidden; background-color:#f5f5f5;} .page_0401_f .b_box_03 p{margin:25px 0 45px; text-align: center;} .page_0401_f .b_box_03 .b_more_btn{width: 240px; height:60px; text-align: center; padding:0; background-color: #1D1D1F; border:0; color: #fff; box-shadow: none; border:none;} .page_0401_f .b_box_03 .b_more_btn span{display: block; width:100%;} @media screen and (max-width: 768px){ .page_0401_f .b_box_03{height: 245.8px; padding-top:0; background-size:cover} .page_0401_f .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 0;} } /* 0402 요양보호사 */ .c_mr_blue{color:#39D0FF;} .c_mr_org{color:#EF694C;} .c_mr_pink{color:#ff86d7;} .mr_blue_bg{background-color:#39D0FF !important;} .mr_org_bg{background-color:#EF694C !important;} .page_0402_1{background-color: #fff; padding-bottom: 180px} .yoyang_0402{width: fit-content; margin:0 auto; border-radius: 200px; background-color:#EAFAFF; padding:20px; display:flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:20px;} .yoyang_0402 div{ background-color:#fff; border:2px solid #39d0ff; width:200px; aspect-ratio: 1 / 1; border-radius: 100px;display:flex; align-items: center; justify-content: center;} .yoyang_0402 div>p.fs_20{color: #00A3D7;} .yoyang_0402>p.fw_eb{color:#CACACA;} @media screen and (max-width:860px) { .yoyang_0402 div{ width:140px;} } @media screen and (max-width: 720px) { .yoyang_0402{gap:10px; padding:10px;} .yoyang_0402 div{ width:120px;} } @media screen and (max-width: 500px) { .page_0402_1{padding-bottom:50px;} .yoyang_0402{gap:5px; padding:10px;} .yoyang_0402 div{ width:90px;} } .page_0402_2{background-color:#fff;} .page_0402_2 .b_cont_box{display: flex;align-items: center;justify-content: center;max-width: 1360px;margin: 0 auto;width: 100%;position: relative;} .page_0402_2 .b_img_box{width:80%; height:450px;} .page_0402_2 .b_img_box ul{width:100%; position:relative; height:100%;} .page_0402_2 .b_img_box ul li{height:100%;position:absolute; top:0; left:0; background-color:#F5F5F7; border-radius: 20px; width:100%; display:flex; flex-flow:row wrap; align-items: center; justify-content: center; gap:0px 10px; padding:30px 30px;} /* .page_0402_2 .b_img_box ul li:first-child{opacity: 1;} */ .page_0402_2 .b_img_box li.b_img_01{z-index:5;} .page_0402_2 .b_img_box li.b_img_02{z-index:3;} .page_0402_2 .b_img_box li.b_img_03{z-index:1;} .page_0402_2 .b_img_box .txt_box{flex:1; min-width:310px; height: 100%; display:flex; flex-flow:column nowrap; align-items: flex-start; justify-content: space-between; gap:10px; } .page_0402_2 .b_img_box .txt_box .tit_box p.fs_42{margin-top:10px;} .page_0402_2 .b_img_box .txt_box .lists p{margin:20px 0; padding-left:20px; position:relative;} .page_0402_2 .b_img_box .txt_box .lists p::before{content:""; width:6px; height:6px; border-radius: 50px; position:absolute; top:9px; left:0;} .page_0402_2 .b_img_box .txt_box .lists.org p::before{background-color:#EF694C;} .page_0402_2 .b_img_box .txt_box .lists.blue p::before{background-color:#39D0FF;} .page_0402_2 .b_img_box .txt_box .lists.pink p::before{background-color:#FF86D7;} .page_0402_2 .b_img_box .txt_box .hashes{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap:10px;} .page_0402_2 .b_img_box .txt_box .hashes span{border-radius: 20px; background-color: #fff; border:1.5px solid #EF694C; padding:5px 12px;} .page_0402_2 .b_img_box .txt_box .hashes span.c_mr_blue{border:1.5px solid #39D0FF;} .page_0402_2 .b_img_box .txt_box .hashes span.c_mr_pink{border:1.5px solid #FF86D7;} .page_0402_2 .b_img_box li .img_box{flex:1.5; height:100%; display: flex;flex-flow: column; justify-content: flex-start; align-items: center; gap: 10px} .page_0402_2 .b_img_box li .img_box figure{position:relative;height:calc(100% - 36px); width:100%;} .page_0402_2 .b_img_box li .img_box figure img{position:absolute;top:50%;left:50%; transform: translate(-50%,-50%);width:100%; height:auto; } .page_0402_2 .b_img_box li .img_box .arrow_set{display: flex; flex-flow:row nowrap; align-items: center; justify-content: center; gap:40px;} .page_0402_2 .b_img_box li .img_box .arrow_set svg{cursor:pointer;} .page_0402_2 .b_img_box li .img_box .arrow_set svg:not(.on){cursor: default; pointer-events: none;} .page_0402_2 .b_img_box li .img_box .arrow_set svg.on path{fill:#EF694C; transition:fill 0.3s ease;} .page_0402_2 .b_img_box li .img_box .arrow_set.blue svg.on path{fill:#39D0FF;} .page_0402_2 .b_img_box li .img_box .arrow_set.pink svg.on path{fill:#ff86d7;} .page_0402_2 .b_img_box li .img_box .arrow_set .arrow_right{transform: rotate(180deg);} @media screen and (max-width:1280px) { .page_0402_2 .b_img_box{height:400px;} .page_0402_2 .b_img_box .txt_box .lists p{margin:10px 0; } } @media screen and (max-width:1080px) { .page_0402_2 .b_img_box{ height:600px;} .page_0402_2 .b_img_box ul li{flex-flow:column-reverse nowrap; justify-content: space-between;} .page_0402_2 .b_img_box .txt_box{width:100%;} .page_0402_2 .b_img_box li .img_box{width:100%;} .page_0402_2 .b_img_box li .img_box figure img{height:100%; width:auto;} } @media screen and (max-width:760px) { .page_0402_2 .b_img_box .txt_box{flex:none; min-width:0; height: auto; } .page_0402_2 .b_img_box li .img_box{flex:none; height:auto; gap:5px;} .page_0402_2 .b_img_box li .img_box figure{height:auto; aspect-ratio: 71 / 40;} .page_0402_2 .b_img_box li .img_box figure img{width:100%; height:auto;} .page_0402_2 .b_img_box li .img_box .arrow_set svg{width:14px; height:18px;} } @media screen and (max-width:500px) { .page_0402_2 .b_img_box{width:80%; height:480px;} .page_0402_2 .b_img_box ul li{padding:20px; justify-content: flex-end; gap:20px;} .page_0402_2 .b_img_box .txt_box .lists p{padding-left:12px;} .page_0402_2 .b_img_box .txt_box .lists p::before{width:4px; height:4px; top:7px;} .page_0402_2 .b_img_box .txt_box .hashes span{padding:4px 8px;} } .page_0402_3 {background-color:#39D0FF; overflow: hidden; padding-bottom:100px;} .page_0402_3 .b_tit_box{color: #1d1d1f;} .page_0402_3 .b_tit_box .b_cont_txt{color:#626262;} .page_0402_3 .b_bot_box {margin:100px auto; height: fit-content; position: relative; display:flex; flex-flow: column; gap:20px; align-items:center; justify-content: center;} .page_0402_3 .b_bot_box ul{display: flex; align-items: center; margin:0 auto;} .page_0402_3 .b_bot_box ul.b_text_list{height:100px; gap:40px; color:#fff; text-align: center;position:relative;} .page_0402_3 .b_bot_box ul.b_text_list li{ width:340px; height:fit-content; padding:20px 30px; background-color:#fff; border-radius: 10px; color:#00000050;} .page_0402_3 .b_bot_box ul.b_text_list li span.c_mr_org{color:#1D1D1F50;} .page_0402_3 .b_bot_box ul.b_text_list li.on{color:#1D1D1F;} .page_0402_3 .b_bot_box ul.b_text_list li.on span.c_mr_org{color:#EF694C;} .page_0402_3 .b_bot_box ul.b_text_list p{word-break: keep-all;} .page_0402_3 .b_bot_box ul.b_img_list{gap:160px;} .page_0402_3 .b_bot_box ul.b_img_list li{transition:all 0.5s ease; border:3px solid #fff; padding-top:25px;display:flex; flex-flow: column; gap:40px; align-items: center; justify-content: center; text-align: center; color:#1d1d1f40; aspect-ratio: 1 / 1;width: 220px; display: block; border-radius: 300px; background-color: #fff;} .page_0402_3 .b_bot_box ul.b_img_list li.on{background-color:#FFE8E3 ; color:#1d1d1f; border:3px solid #EF694C;} .page_0402_3 .b_bot_box ul.b_img_list li p{margin-top:10px;} .page_0402_3 .b_bot_box figure{width: 100%;} .page_0402_3 .b_bot_box ul.b_img_list li.on img{opacity:1;} .page_0402_3 .b_bot_box figure img{transition:all 0.5s ease; display: block; opacity:0.5; height: 120px; margin:0px auto;} @media screen and (max-width:1159px) { .page_0402_3 .b_bot_box ul.b_img_list{gap:70px;} .page_0402_3 .b_bot_box ul.b_img_list li{width:200px;} .page_0402_3 .b_bot_box figure img{height:100px;} .page_0402_3 .b_bot_box ul.b_text_list{gap:20px;} .page_0402_3 .b_bot_box ul.b_text_list li{width:250px;} } @media screen and (max-width: 830px){ .page_0402_3 .b_bot_box ul{align-items: flex-start;} .page_0402_3 .b_bot_box ul.b_text_list{gap:15px;} .page_0402_3 .b_bot_box ul.b_text_list li{width:220px;} .page_0402_3 .b_bot_box ul.b_img_list{gap:40px;} .page_0402_3 .b_bot_box ul.b_img_list li{width:200px;} .page_0402_3 .b_bot_box figure img{height:100px;} } @media screen and (max-width: 720px){ .page_0402_3 .b_tit_box .b_cont_txt {margin-top: 10px;} .page_0402_3 .b_top_box{margin-bottom: 30px;} .page_0402_3 .b_bot_box {margin:40px auto; gap:20px; height: max-content;} .page_0402_3 .b_bot_box ul{gap: 15px;} .page_0402_3 .b_bot_box ul.b_img_list{height:200px;} .page_0402_3 .b_bot_box ul.b_img_list li{transition:none; background-color:#FFE8E3 ; color:#1d1d1f; border:3px solid #EF694C; display: none; position:absolute; left:50%;top:0%; transform: translateX(-50%);} .page_0402_3 .b_bot_box ul.b_img_list li.on{display:block; background-color:#FFE8E3 ; color:#1d1d1f;} .page_0402_3 .b_bot_box ul.b_img_list li p{font-size: 22px;} .page_0402_3 .b_bot_box ul.b_text_list li{width:300px; display: none; color:#1d1d1f; position:absolute; left:50%;top:50%; transform: translate(-50%,-50%);} .page_0402_3 .b_bot_box ul.b_text_list li span.c_mr_org{color:#EF694C;} .page_0402_3 .b_bot_box ul.b_text_list li.on{display: block;} .page_0402_3 .b_bot_box ul.b_text_list li p{font-size:14px;} .page_0402_3 .b_bot_box figure img{transition:none; opacity:1;} } .page_0402_4{background-color: #fff;} .page_0402_4 .b_inner .swiper-container{padding:10px 5px;} .page_0402_4 .b_inner .swiper-container .swiper-slide{width:fit-content; display: flex; flex-flow:row nowrap; align-items: center; justify-content: center;} .page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap{width:fit-content;} .page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide{border-radius: 20px; width:200px; height:200px; box-shadow: 0 0 10px 1px #1D1D1F20; position:relative; overflow: hidden;} .page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide .card_bg{filter: brightness(0.5); position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:101%; aspect-ratio: 1 / 1;} .page_0402_4 .b_inner .swiper-container .swiper-slide.on .cert_wrap .card_slide .card_bg{filter:brightness(1);} .page_0402_4 .b_inner .swiper-container .swiper-slide.on .cert_wrap .card_slide{border:3px solid #EF694C;} .page_0402_4 .b_inner .swiper-container .swiper-wrapper.blue .swiper-slide.on .cert_wrap .card_slide{border:3px solid #39D0FF;} .page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide p{text-align: center; border-radius: 5px; width: max-content; padding:5px 10px; font-size: 1.25rem;color:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);} /* fs_22 사이즈 */ .page_0402_4 .b_inner .swiper-container .swiper-slide.on .cert_wrap .card_slide p{background-color:rgba(239, 105, 76, 0.85);} .page_0402_4 .b_inner .swiper-container .swiper-wrapper.blue .swiper-slide.on .cert_wrap .card_slide p{background-color:rgba(57,208,255,0.85);} @media screen and (max-width:860px) { /* 영문페이지 특정 css */ .page_0401_en.page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide p.fs_32{font-size: 2.25rem;}/* .fs_36과 같은 사이즈 */ .page_0401_en.page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide span.pc, .page_0401_en.page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide br.pc{display: inline;} } @media screen and (max-width:720px) { /* 영문페이지 특정 css */ .page_0401_en.page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide span.pc, .page_0401_en.page_0402_4 .b_inner .swiper-container .swiper-slide .cert_wrap .card_slide br.pc{display: none;} } .page_0402_f.b_banner_sec{padding:0;width: 100%; position:relative;aspect-ratio: 3.2 / 1;} .page_0402_f .b_box_03{background: url(/img/sub/0402/yoyang_footer_bg.png) no-repeat bottom center; background-size: 100% auto; display: flex; align-items: flex-start; padding-left:10%; flex-direction: column; justify-content: center; height: 100%; overflow: hidden; background-color:#f5f5f5;} .page_0402_f .b_box_03 .txtset{display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start;} .page_0402_f .b_box_03 p{color:#fff; width: max-content; margin:25px 0 45px; text-align: left;} .page_0402_f .b_box_03 .b_more_btn{margin:0; color:#fff; border:none; width:240px;} .page_0402_f .b_box_03 .b_more_btn figure{background-color:#ffffff60;} @media screen and (max-width:1281px) { /* .page_0402_f .b_box_03 p{margin:25px 0 25px;} */ .page_0402_f .b_box_03 .b_more_btn{padding:5px 5px 5px 15px;width: 200px; height: 60.5px;} } @media screen and (max-width:880px) { .page_0402_f .b_box_03 .txtset p.fs_42{font-size: 30px; margin:10px 0 25px} .page_0402_f .b_box_03 .txtset p .fs_48{font-size: 38px;} .page_0402_f .b_box_03 .b_more_btn{width: 180px; height: 44.5px; } .page_0402_f .b_box_03 .b_more_btn figure{width:34.5px;} .page_0402_f .b_box_03 .b_more_btn figure img{width:20px;} } @media screen and (max-width: 720px){ .page_0402_f .b_box_03{padding-left:5%;} .page_0402_f .b_box_03 .txtset p.fs_42{font-size: 22px;} .page_0402_f .b_box_03 .txtset p .fs_48{font-size: 28px;} .page_0402_f .b_box_03 .b_more_btn{width: 140px; height: 34.5px; padding: 6px 6px 6px 10px; } .page_0402_f .b_box_03 .b_more_btn figure{width:25px;} .page_0402_f .b_box_03 .b_more_btn figure img{width:10px;} } @media screen and (max-width: 500px){ .page_0402_f .b_box_03 .txtset p.fs_42{font-size: 16px;line-height:1.2; margin:10px 0 10px;} .page_0402_f .b_box_03 .txtset p .fs_48{font-size: 18px;} .page_0402_f .b_box_03 .b_more_btn{width: 120px; height: 30.5px; padding: 6px 6px 6px 8px; } .page_0402_f .b_box_03 .b_more_btn .fs_20{font-size: 11px;} .page_0402_f .b_box_03 .b_more_btn figure{width:22px;} .page_0402_f .b_box_03 .b_more_btn figure img{width:8px;} } /* 물리치료사 */ .c_mr_pur{color:#5D5DF9;} .c_mr_grn{color:#1BC768;} .mr_grn_bg{background-color:#1BC768 !important;} .yoyang_0402.grn{background-color:#E9FFF3 ;} .yoyang_0402.grn div{ background-color:#fff; border:2px solid #1BC768; width:200px; aspect-ratio: 1 / 1; border-radius: 100px;display:flex; align-items: center; justify-content: center;} .yoyang_0402.grn div>p.fs_20{color: #1BC768;} @media screen and (max-width:860px) { .yoyang_0402.grn div{ width:140px;} } @media screen and (max-width: 720px) { .yoyang_0402.grn div{ width:120px;} } @media screen and (max-width:500px){ .yoyang_0402.grn div{width:90px;} } .page_0402_2 .b_img_box .txt_box .lists.grn p::before{background-color:#1BC768;} .page_0402_2 .b_img_box .txt_box .lists.pur p::before{background-color:#5D5DF9;} .page_0402_2 .b_img_box .txt_box .hashes span.c_mr_grn{border:1.5px solid #1BC768;} .page_0402_2 .b_img_box .txt_box .hashes span.c_mr_pur{border:1.5px solid #5D5DF9} .page_0402_2 .b_img_box li .img_box .arrow_set.grn svg.on path{fill:#1BC768;} .page_0402_2 .b_img_box li .img_box .arrow_set.pur svg.on path{fill:#5D5DF9;} .page_0403_3 {background-color:transparent;} .page_0402_3 .b_bot_box ul.b_img_list.pur li.on{background-color:#EFEFFF ; color:#1d1d1f; border:3px solid #5D5DF9;} .page_0402_3 .b_bot_box ul.b_text_list li span.c_mr_pur{color:#1D1D1F50;} .page_0402_3 .b_bot_box ul.b_text_list li.on span.c_mr_pur{color:#5D5DF9;} @media screen and (max-width:720px) { .page_0403_3 .b_bot_box ul.b_img_list.pur li{background-color:#EFEFFF ; color:#1d1d1f; border:3px solid #5D5DF9;} .page_0403_3 .b_bot_box ul.b_text_list li span.c_mr_pur{color:#5D5DF9;} } .page_0402_4 .b_inner .swiper-container .swiper-wrapper.grn .swiper-slide.on .cert_wrap .card_slide{border:3px solid #1BC768;} .page_0402_4 .b_inner .swiper-container .swiper-wrapper.pur .swiper-slide.on .cert_wrap .card_slide{border:3px solid #5D5DF9;} .page_0402_4 .b_inner .swiper-container .swiper-wrapper.grn .swiper-slide.on .cert_wrap .card_slide p{background-color:rgba(27, 199, 104, 0.84);} .page_0402_4 .b_inner .swiper-container .swiper-wrapper.pur .swiper-slide.on .cert_wrap .card_slide p{background-color:rgba(93, 93, 249, 0.84);} .page_0402_f.page_0403_f .b_box_03{background: url(/img/sub/0403/mully_footer_bg.png) no-repeat bottom center; background-size: 100% auto; display: flex; align-items: flex-start; padding-left:10%; flex-direction: column; justify-content: center; height: 100%; overflow: hidden; background-color:#f5f5f5;} /* 기업소개>인증/고객사*/ .sub_page{display: flex; align-items: center; justify-content: center;padding: 150px 0;text-align: center;} .sub_page .b_tit_box {margin-bottom: 80px;} .sub_page h3 {margin-bottom: 20px;} .page_f9{background-color:#f9f9f9;padding:150px 0;display: flex; align-items: center; justify-content: center;text-align: center;flex-direction: column; } .partner_logo_wrap { margin-top: 20px;display: flex;justify-content: center;} .partner_logo_list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0;} .partner_logo_list li img { width:100%; max-width: 210px;height: auto; display: block; margin: 0 auto;border: solid 1px #d9d9d9;padding:5px;} .page0602_2 img{border-radius: 20px;width: 100%;} .project_list { text-align: left; max-width: 1520px; width: 94%;} .project_list ul { list-style: none; padding: 0; margin-top: 60px;} .project_list li { display: flex; align-items: flex-start; border-bottom: 1px solid #d9d9d9; padding: 50px 0; flex-direction: column; gap: 15px;} .project_num {font-weight: bold;color: #9f91e4; font-size: 1.25rem; margin-right: 35px;} .project_title { font-size: 1.25rem; font-weight: 600;} .project_desc { font-size: 1rem; color: #666; line-height: 1.5;} .certi_container {overflow: hidden;} .page0602_2 .swiper-wrapper{padding: 0 10px;} .page0602_2 .cert_wrap { max-width: 310px; padding:10px 10px; max-height:260px; aspect-ratio: 1 / 0.9; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; background-color:#fff; border-radius: 20px; border: solid 1px #d9d9d9; } @media screen and (max-width: 720px) { .sub_page{padding:90px 0;margin-bottom: 100px;} .partner_logo_list { gap: 5px; grid-template-columns: repeat(4, 1fr); /* 1줄에 4개 */ } .project_list ul{margin-top:20px;} .project_list li {padding:25px 0;} .page0602_2 img{border-radius: 10px;} .page0602_2 .swiper-wrapper{gap:0px;} .page0602_2 .swiper-wrapper .swiper-slide{height:100%; width:auto;} .page0602_2 .cert_wrap{width:100%;} .page_0301_4 .b_bot_box{height: 100px;} } /*영문홈페이지*/ .eng .b_txt_box{width: 40%;} .eng .b_txt_box ul li{aspect-ratio: 12 / 10;} .eng .vision_box {width:45%;} .eng .bis_box {width:33%;} .eng .b_box_wrap{justify-content: space-between;} .eng_thum {width: 100%; max-width: 1200px;} @media screen and (max-width: 1080px){ .eng.bis_wrap {flex-direction: column; align-items: center;gap:50px;} .eng .bis_box {width:50%;} } @media screen and (max-width: 830px){ .eng .b_txt_box{width: 100%;} .eng .b_img_box li figure {margin-top: 82px; } .eng .b_txt_box ul li{height: 130%;} } @media screen and (max-width: 720px){ .eng .bis_box {width:100%;} } .pv{text-align: left!important;max-width: 1520px;margin:0 auto;padding:150px 0;} .pv_txt { margin-bottom: 70px;display: flex; flex-direction: column; gap: 15px;} .pv_txt h2 {color: #333;border-bottom: 2px solid #ddd;padding-bottom: 20px;margin-bottom: 15px; font-size: 1.25rem;font-weight: 700; } .pv_txt h3 {color: #555;margin-top: 20px;font-size: 1.25rem;margin-bottom: 15px;font-weight: 500;} .pv_txt p, .pv_txt ul { color: #666;font-size: 1.125rem;line-height: 1.5} .pv_txt ul {list-style: none; padding: 0; } .pv_txt ul li {padding-left: 20px; position: relative; margin-bottom: 10px; } .pv_txt ul li::before {content: "\2022"; color: #007bff; font-weight: bold; position: absolute; left: 0; } @media screen and (max-width: 1080px){ .pv{padding:90px 30px;} }