/* Common **********************************************************************/ /* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); <-- 기존에 있던 것 */ /* Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'YeogiOttaeJalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap'); /* Common **********************************************************************/ html,body {width:100%; scroll-behavior: smooth;} html {overflow-y:scroll; box-sizing:border-box;} *, *:before, *:after{box-sizing:inherit;} *{ -webkit-text-size-adjust:none; -webkit-text-size-adjust - auto | none | N% (default auto) } body {word-break:break-all;-ms-word-break:break-all; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;} fieldset,img {border:0px none; vertical-align:top;} dl,ul,ol,menu,li {list-style:none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;} button {border:0 none; background-color:transparent; cursor:pointer;} body { background:#fff;} body,th,td,input,select,textarea,button {font-size:inherit; line-height:1.6; font-family: "Noto Sans KR", sans-serif; color:inherit;resize:none;} input, select, textarea, button{vertical-align:middle; } a:link,a:active,a:visited{color:#666; text-decoration:none; border:0px;} a:hover,a:focus{color:#666; text-decoration:none} table {border-collapse:collapse; border-spacing:0;} address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;} summary, caption, legend, hr {width:0; height:0; font-size: ; line-height: ; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;} caption {position:static;} /* label hidden 처리 */ .invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;} label.invisible{*position:Absolute;} /* input {appearance: none; -webkit-appearance: none; -webkit-border-radius: 0;} select {-webkit-appearance: none; -moz-appearance: none; appearance: none;} */ .center{text-align:center;} .pc_img {display:block;} .tab_img {display:none;} .mob_img {display:none;} :root { --orange: #f48500; --green: #00c0a9; --lightgreen: #85d10d; --purple: #a438ff; --purple02:#7612f7; --blue: #2093ff; --lightblue: #29c5dc; --pink :#ff0076; --yellow:#ffb502; } .orange{color: #f48500;font-weight: inherit;} .orange02{color: #ffa800;font-weight: inherit;} .green{color: #00c0a9;font-weight: inherit;} .lightgreen{color: #85d10d;font-weight: inherit;} .purple{color: #a438ff;font-weight: inherit;} .purple02{color:#7612f7;font-weight: inherit;} .blue{color: #2093ff;font-weight: inherit;} .lightblue{color: #29c5dc;font-weight: inherit;} .pink {color:#ff0076;font-weight: inherit;} .yellow{color:#ffb502;font-weight: inherit;} .bg_orange{background:#f48500;} .bg_orange02{background:#ffa800;} .bg_green{background: #00c0a9;} .bg_lightgreen{background: #85d10d;} .bg_purple{background: #a438ff;} .bg_purple02{background:#7612f7;} .bg_blue{background: #2093ff;} .bg_lightblue{background: #29c5dc;} .bg_pink {background:#ff0076;} .bg_yellow{background:#ffb502;} .bg_black{background: #333;} ::selection{background: var(--blue); color: #fff;} .fj{font-family: 'YeogiOttaeJalnan';} /* ==main== */ #wrap{ position: relative; width: 100%; max-width: 100%; min-width: 1440px; margin: 0 auto; overflow: hidden;word-break: keep-all; } .inner{width: 1200px; margin: 0 auto; max-width:100%;} #header .inner{width: 1400px;} #header .h_top{border-bottom: 1px solid #ddd;} #header .h_top .inner{display: flex;align-items: center;justify-content: space-between; height: 40px;} #header .h_top .right{display: flex;align-items: center;gap:20px;} #header .h_top a{display: flex;align-items: center;gap:6px;font-size: 15px; color: #999;font-weight: 500;} #header .header .inner{display: flex; align-items: center;justify-content: space-between; height: 80px;} .gnb{display: flex;gap:70px;align-items: center;} .gnb li a{display: block;padding: 26px 0;font-size: 17px; color: #222; font-weight: 700;} .gnb li.orange a{color: var(--orange);} .gnb li.green a{color: var(--green);} #header .header .btn01{position: relative; width: 30px; height: 24px;} #header .header .btn01::before{content:'';position: absolute; top: 0; right: 0;width: 100%; height: 3px; background: #333;transition:.3s;} #header .header .btn01::after{content:'';position: absolute; bottom: 0; right: 0;width: 100%; height: 3px; background: #333;transition:.3s;} #header .header .btn01 span{position: absolute;top: 11px; right: 0;width: 20px;height: 3px; background: #333;} #header.on .header .btn01::before{transform:rotate(45deg);top: 11px;} #header.on .header .btn01::after{transform:rotate(-45deg);bottom: 10px;} #header.on .header .btn01 span{opacity: 0;} .all_menu_wrap{display: none;position: absolute; left: 0; top: 120px; width: 100%;line-height: 1; background: #fff;z-index: 8000; box-shadow:3px 10px 7px rgba(0,0,0,.15); border-top: 1px solid #ddd;} .all_menu_wrap .inner{display: flex; width: 1400px;border-left: 1px solid #ddd;} .all_menu{flex:1; padding: 40px 0 60px; border-right: 1px solid #ddd;text-align: center;} .all_menu h3{position: relative;font-size: 18px; color: #222;font-weight: 700; margin-bottom: 30px; padding-bottom: 30px;} .all_menu h3::after{content:'';position: absolute; left: 50%;bottom: 0; transform:translateX(-50%); width: 30px; height: 2px; background: #ddd;} .all_menu ul li:not(:last-child){margin-bottom: 20px;} .all_menu ul li a{display: block;font-size: 16px; color: #666;transition:.3s;} .all_menu ul li.on a{color: var(--blue);font-weight: 700;} .all_menu ul li:hover a{color: var(--blue);font-weight: 700;} /*navi*/ .nav_btn{display: none;} .navigation{display: none;} /* visual_wrap */ #visual_wrap{position: relative;line-height: 1;} #visual_wrap .txt_wrap{position: absolute;top: 50%;left: 0;transform:translateY(-50%);width: 100%;} #visual_wrap .txt_wrap .inner{width: 1400px;} #visual_wrap .txt_wrap .txt{margin-left: auto;width: fit-content; padding-right: 60px;} #visual_wrap .txt_wrap .txt p{font-size: 55px; color: #222; line-height: 75px;} #visual_wrap .txt_wrap .txt p em.orange{color: var(--orange);} #visual_wrap .txt_wrap .txt span{display: block;font-size: 22px; line-height: 34px;color: #666; margin-top:20px;} #visual_wrap .txt_wrap .txt span em.purple{font-weight: 700;color: var(--purple);} #visual_wrap .slick-arrow{position: absolute;top: 50%; transform:translateY(-50%); width: 80px; height: 80px; border-radius:50%;text-indent: -9999px;z-index: 100; box-shadow:0px 0px 16px rgba(0,0,0,.12);} #visual_wrap .slick-prev{left: 220px; background: url(/assets/images/main/vis_prev_pc.png)center no-repeat; background-size: cover;} #visual_wrap .slick-next{right: 220px; background: url(/assets/images/main/vis_next_pc.png)center no-repeat; background-size: cover;} /* search_con */ #search_con{padding-top: 120px;line-height: 1;} #search_con .inner{display: flex;} #search_con h3{width: 380px;font-size: 30px; line-height: 40px; } #search_con .search_wrap{display: flex;gap:10px;align-items: center;width: calc(100% - 360px);} #search_con .search_wrap .search{position: relative;width: 180px;z-index: 100;} #search_con .search_wrap .search02{width: 380px;} #search_con .search_wrap .search em{display: flex;align-items: center;justify-content: space-between; width: 100%; height: 60px;padding: 0px 30px;font-size: 18px; color: var(--yellow); font-weight: 500; border:2px solid var(--yellow);border-radius:30px; cursor:pointer;} #search_con .search_wrap .search ul{display: none;position: absolute;left: 0; width: 100%;top: 70px; background: #fff; border-radius:8px; box-shadow:0px 0px 16px rgba(0,0,0,.12);} #search_con .search_wrap .search ul li a{display: flex; align-items: center;height: 48px;padding: 0px 30px;font-size: 16px;color: 666px; line-height: 1.3;} #search_con .search_wrap .search ul li:hover a{background: #fbf2e9; color: var(--yellow);} #search_con a.search_btn{display: flex;align-items: center;justify-content: center;width: 60px; height: 60px; margin-left: 10px; border-radius:50%;background: linear-gradient(120deg,rgba(255, 106, 71, 1) 0%, rgba(255, 168, 0, 1) 100%);} /* section */ .section{padding: 150px 0;line-height: 1;} .section .sec_tit01{margin-bottom: 55px;text-align: center;} .section .sec_tit01 h4{font-size: 32px;padding: 20px 50px;color: #fff; border-radius:40px;width: fit-content;margin: 0 auto 25px;} .section .sec_tit01 p{font-size: 55px; line-height: 75px; color: #222;font-family: 'YeogiOttaeJalnan';} .section .sec_tit01 span{display: block;font-size: 30px; color: #666; margin-top: 12px; line-height: 40px;} .section .sec_tit01.wh p, .section .sec_tit01.wh span{color: #fff;} .section .sec_tit01.mb0{margin-bottom: 0;} .section .sec_tit01.left{text-align: left;} .section .sec_tit02{margin-bottom: 35px;} .section .sec_tit02 p{font-size: 36px; color: #222;font-family: 'YeogiOttaeJalnan'; line-height: 50px;} .section .sec_tit02 em{display: flex;align-items: center;justify-content: center; font-size: 32px; color: #fff; width: 120px; height: 64px; border-radius:50px;font-family: 'YeogiOttaeJalnan'; margin: 0 auto 30px;} .section .sec_tit02.wh p{color: #fff;} .section .sec_tit02.mb0{margin-bottom: 0;} a.more_btn_st01{position: relative;display: flex;align-items: center;width: 300px; height: 100px; border-radius:50px;padding: 0px 60px;margin: 60px auto 0;} a.more_btn_st01 p{font-size: 24px;color: #fff;font-weight: 500;} a.more_btn_st01 em{position: absolute;top: 50%;transform:translateY(-50%);right: 5px;display: flex;align-items: center;justify-content: center; width: 90px; height: 90px;background: #fff; border-radius:50%;transition:.3s;} a.more_btn_st01:hover em{background: rgba(255,255,255,.8);} .section .slick-arrow{position: absolute;top: 50%;transform:translateY(-50%);display: block;width: 80px; height: 80px; border-radius:50%; z-index: 1000;text-indent: -9999px; box-shadow:8px 8px 16px rgba(0,0,0,.08);} .section .slick-prev{left: -40px;background: url(/assets/images/main/prev01.png)center no-repeat rgba(0,0,0,.8); } .section .slick-next{right: -40px;background: url(/assets/images/main/next01.png)center no-repeat rgba(0,0,0,.8); } .box_con.mb:not(:last-child){margin-bottom: 100px;} .box_wrap_st01{display: flex;gap:30px;} .box_wrap_st01 .box{position: relative;width: calc((100% - 60px) / 3); padding: 100px 40px 40px; border:1px solid #ddd; border-radius:20px; overflow: hidden;} .box_wrap_st01 .box em{position: absolute;top: -55px;left: 50%;transform:translateX(-50%);display: flex;align-items: center;justify-content: end;flex-direction: column;color: #fff;font-size: 14px; line-height: 24px; width: 120px; height: 120px;padding-bottom: 10px;text-align: center; background: var(--purple); border-radius:50%;} .box_wrap_st01 .box em b{font-size: 18px;} .box_wrap_st01 .box .txt_wrap{margin-bottom: 20px;text-align: center;} .box_wrap_st01 .box .txt_wrap p{font-size: 24px;color: #222;line-height: 36px;} .box_wrap_st01 .box .txt_wrap span{display: block;font-size: 18px; color: #666; margin-top: 15px; line-height: 28px;} .box_wrap_st01 .box .img_wrap img{width: 100%; border-radius:20px;} .box_wrap_st01.icon_wrap{gap:20px} .box_wrap_st01.icon_wrap .box{padding: 40px 30px;width: calc((100% - 60px) / 4);} .box_wrap_st01.icon_wrap .box .icon{width: fit-content;margin: 0 auto 25px;} .box_wrap_st01.icon_wrap .box .txt_wrap{margin-bottom: 0;} .box_wrap_st02{display: flex;gap:30px;flex-wrap:wrap;} .box_wrap_st02 .box{border:1px solid #ddd; border-radius:20px; overflow: hidden; background: #fff;} .box_wrap_st02 .box .tit{display: flex;align-items: center;justify-content: center;color: #fff; min-height: 64px; padding: 15px;text-align: center;} .box_wrap_st02 .box .tit p{font-size: 24px;line-height: 36px;} .box_wrap_st02 .box .txt_wrap{padding: 40px;text-align: center;} .box_wrap_st02 .box .txt_wrap p{font-size: 24px;color: #222;line-height: 36px;margin-bottom: 10px;} .box_wrap_st02 .box .txt_wrap span{display: block;font-size: 18px; color: #666; line-height: 28px;} .box_wrap_st02 .box .img{margin-top: 20px;} .box_wrap_st02.flex02 .box{width: calc((100% - 30px) / 2);} .box_wrap_st02.flex03 .box{width: calc((100% - 60px) / 3);} .box_wrap_st02.border_none .box{border:0;} .arr_box_st01{position: relative;padding: 100px 0;} .arr_box_st01 .sec_tit01{margin-bottom: 0;} .arr_box_st01 img.arr{display: block;position: absolute;left: 50%;top: 99%; transform:translate(-50%);} .graph_box_st01{padding: 40px; border-radius:20px;} .graph_box_st01.mob{display: none;} .graph_box_st01 h4{font-size: 32px; text-align: center; margin-bottom: 40px;} .graph_box_st01 .graph_box{display: flex;justify-content: center;gap:60px;align-items: flex-end;} .graph_box_st01 .graph_box.f02{gap:40px;} .graph_box_st01 .graph_wrap .tit{display: flex;align-items: center;justify-content: center;margin-bottom: 20px;} .graph_box_st01 .graph_wrap .tit p{font-size: 20px; color: #fff;} .graph_box_st01 .graph{position: relative;display: flex;justify-content: center;} .graph_box_st01 .graph .level_wrap{position: absolute;top: 0;left: 0;width: 100%;display: flex;margin-top: 20px;} .graph_box_st01 .graph .level_wrap p{font-size: 18px;flex:1;text-align: center;color: #fff;} .graph_box_st01 .graph .level_wrap p:first-child{margin-top: 32px;} .graph_box_st01 .graph .level_wrap p:only-child{margin-top: 0;} .graph_box_st01 .graph .bot_txt{position: absolute;bottom: 35px;left: 0;width: 100%;display: flex;} .graph_box_st01 .graph .bot_txt p{font-size: 20px;flex:1;text-align: center;line-height: 30px;} .graph_box_st01 .txt_wrap{display: flex;} .graph_box_st01 .txt_wrap .txt{position: relative;display: flex;align-items: center;justify-content: center;flex:1;min-width: 100px;min-height: 120px; padding: 20px 0;background: #fff; border-radius:12px;} .graph_box_st01 .txt_wrap .txt em{display: flex;align-items: center;justify-content: center;position: absolute;top: -15px; left: 50%;transform:translateX(-50%);padding: 0px 25px;height: 30px; border-radius:15px;font-size: 16px; color: #fff;font-weight: 700;text-align: center;} .graph_box_st01 .txt_wrap .txt p{font-size: 16px; color: #222; font-weight: 500; line-height: 24px;text-align: center;} .txt_br_box{padding: 20px; border-radius:55px; border:5px solid #f2dcff;text-align: center; margin-bottom: 30px; background: #fff;} .txt_br_box p{font-size: 20px; color: #666;line-height: 30px;} .txt_br_box.lightblue{border:5px solid var(--lightblue);} /* section01 */ #section01{background: url(/assets/images/main/sec01_bg01.png)left bottom no-repeat , url(/assets/images/main/sec01_bg02.png)right top 322px no-repeat;} #section01 .box_con{position: relative;} #section01 .box_con .bg_ani img{display: block;position: absolute;z-index: 100;} #section01 .box_con .bg_ani img.ani01{left: -17px;top: 255px;animation: sec01_ani01 3s infinite;} #section01 .box_con .bg_ani img.ani02{right: -35px;bottom: 250px;animation: sec01_ani02 4s infinite;} @keyframes sec01_ani01{ 0%,20%,40%,100%{transform: translateY(0);} 10%, 30%{transform: translateY(-6px);} } @keyframes sec01_ani02{ 0%,40%,100%{transform: rotate(-3deg);} 20%,80%{transform: rotate(3deg);} } #section01 .box_wrap{display: flex;gap:10px;} #section01 .box{border-radius:30px; overflow: hidden;} #section01 .box img, #section01 .box video{display: block;width: 100%; height: 100%; object-fit:cover;} #section01 .box .img_wrap{width: 100%; height: 100%;} #section01 .box_wrap01{align-items: flex-end;justify-content: center;} #section01 .box01{width: 232px;height: 280px;} #section01 .box02{width: 190px; height: 190px;} #section01 .box03{width: 295px; height: 220px;} #section01 .box04{width: 232px; height: 280px; transform:translateY(60px);} #section01 .box05{width: 226px; height: 226px;transform:translateY(-60px);} #section01 .box06{width: 280px; height: 280px;} #section01 .box07{width: 280px; height: 280px;} #section01 .box08{width: 232px;height: 232px;transform:translateY(10px);} #section01 .box09{width: 226px; height: 280px;transform:translateY(-60px);} #section01 .box_wrap02{justify-content: flex-end;align-items: flex-end;margin: 10px 0;} #section01 .box_wrap03{justify-content: center;align-items: flex-start;} #section01 .box_wrap03 .box10{width: 232px; height: 280px;} #section01 .box_wrap03 .box11{width: 417px; height: 220px;} #section01 .box_wrap03 .box12{width: 400px; height: 280px;transform:translateY(10px);} /* section02 */ #section02{position: relative;background: #ffeedb; overflow: hidden;z-index: 1;} #section02 .sec_tit01{margin-bottom: 0;} #section02 .bg_wrap img{position: absolute;z-index: -1;} #section02 .bg01{top: 0; right: 140px;animation: sec02_ani02 5s infinite alternate;} #section02 .bg02{top: 200px; right: 65px;animation: sec02_ani01 5s infinite alternate;} #section02 .bg03{bottom: 0; left: 90px;animation: sec02_ani01 5s infinite alternate;} @keyframes sec02_ani01{ 0%{transform: translateY(0);} 100%{transform: translateY(40px);} } @keyframes sec02_ani02{ 0%{transform: translateY(0);} 100%{transform: translateY(-40px);} } #section02 .sec02_slide .slick-list{width: calc(100% + 20px); overflow: visible; padding-top: 55px;} #section02 .sec02_slide li{margin-right: 20px;text-align: center;transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);} #section02 .sec02_slide li:hover{transform:translateY(-20px);} #section02 .sec02_slide li a{position: relative;display: block; font-size: 18px; padding: 60px 40px; background: #fff; border:2px solid var(--orange); border-radius:30px;} #section02 .sec02_slide li a::before{content:'“';position: absolute;top: 40px; left: 40px;font-size: 100px;color: var(--orange); opacity: .2;font-family: 'YeogiOttaeJalnan';} #section02 .sec02_slide li a::after{content:'”';position: absolute;bottom: 40px; right: 40px;height: 38px;font-size: 100px;color: var(--orange); opacity: .2;font-family: 'YeogiOttaeJalnan';} #section02 .sec02_slide li em{display: block; color: var(--orange);margin-bottom: 35px;} #section02 .sec02_slide li p{font-size: 24px; color: #222;line-height: 36px;height: 72px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;} #section02 .sec02_slide li span{display: block;line-height: 28px;margin: 30px 0px 40px;height: 140px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-wrap:break-word;color: #666;} #section02 .sec02_slide li strong{display: block;color: #999;font-weight: 400;} /*section03*/ #section03{background: url(/assets/images/main/sec03_bg01.jpg)center no-repeat;background-size: cover;} #section03 .txt_wrap{display: flex;gap:40px;justify-content: center;} #section03 .txt_wrap p{font-size: 32px;} #section03 .box_wrap{display: flex; margin-top: 80px;gap:20px;} #section03 .box_wrap .box{position: relative;width: calc((100% - 60px) / 4);padding: 40px 0;text-align: center; border-radius:30px; background: #fff; border:10px solid var(--blue);} #section03 .box_wrap .box::before{content:'';position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%);width: calc(100% + 23px); height: calc(100% + 23px); border:2px solid var(--yellow);border-radius: 32px;} #section03 .box_wrap .box::after{content:'';position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%);width: calc(100% + 1px); height: calc(100% + 1px); border:2px solid var(--yellow);border-radius: 19px;} #section03 .box_wrap .box .icon{position: absolute;top: -35px; left: 50%; transform:translateX(-50%); z-index: 10;} #section03 .box_wrap .box .txt_box{padding-bottom: 40px;} #section03 .box_wrap .box .txt_box p{font-size: 30px; } #section03 .box_wrap .box .txt_box strong{display: block;font-size: 55px;margin-top: 15px; color: var(--yellow);} #section03 .box_wrap .box span{display: block;width: 185px;font-size: 20px; color: #666; line-height: 30px; padding-top: 25px; border-top: 1px dashed #ddd;margin: 0 auto;} /* section04 */ #section04{background: url(/assets/images/main/sec04_bg01.jpg)center no-repeat; background-size: cover;} #section04 .sec_tit01 span{margin-top: 0;padding-top: 20px;} #section04 .sec_tit01 b{position: relative;font-weight: 700; color: var(--yellow);} #section04 .sec_tit01 b::after{content:'';display: block;position: absolute;top: -5px; left: 50%; transform:translateX(-50%); width: 8px; height: 8px; border-radius:50%; background: var(--yellow); animation: sec04_dots 1s ease infinite alternate;} #section04 .sec_tit01 b:nth-child(2n-1)::after{display: none;} #section04 .sec_tit01 b:nth-child(18)::after{animation-delay:-0.1s;} #section04 .sec_tit01 b:nth-child(16)::after{animation-delay:-0.2s;} #section04 .sec_tit01 b:nth-child(14)::after{animation-delay:-0.3s;} #section04 .sec_tit01 b:nth-child(12)::after{animation-delay:-0.4s;} #section04 .sec_tit01 b:nth-child(10)::after{animation-delay:-0.5s;} #section04 .sec_tit01 b:nth-child(8)::after{animation-delay:-0.6s;} #section04 .sec_tit01 b:nth-child(6)::after{animation-delay:-0.7s;} #section04 .sec_tit01 b:nth-child(4)::after{animation-delay:-0.8s;} #section04 .sec_tit01 b:nth-child(2)::after{animation-delay:-1s;} #section04 .sec_tit01 p{margin-top: 20px;} @keyframes sec04_dots{ 0%{} 100%{transform:translateX(-50%) translateY(-5px);} } #section04 .box_con{position: relative;background: url(/assets/images/main/sec04_bot01.png)center bottom 55px no-repeat #fff; border-radius:30px; padding: 170px 55px 55px;} #section04 .box_con .arr{position: absolute;top: 80px;left: 25%; width: 600px; height: 100px; background: url(/assets/images/main/sec04_arr01.png)center left no-repeat; background-size: cover;z-index: 10;} #section04 .box_con .box_wrap{display: flex;align-items: end;padding: 0px 50px;margin-bottom: 30px;} #section04 .box_con .box_wrap .box{position: relative;display: flex;flex-wrap:wrap;align-items: flex-end;gap:20px 10px;flex:1;padding: 0px 30px;} #section04 .box_con .box_wrap .box:not(:last-child)::after{content:'';position: absolute;right: 0; bottom: 10px;width: 1px; height: 310px; border-right: 1px dashed #ddd;} #section04 .box_con .box_wrap .box .txt{display: flex;align-items: center;justify-content: center;border-radius:43px;color: #222;text-align: center; box-shadow:5px 5px 8px rgba(0,0,0,.12);} #section04 .box_con .box_wrap .box .txt01{width: calc((100% - 10px) / 2); height: 86px;} #section04 .box_con .box_wrap .box .txt01 p{font-size: 16px; font-weight: 500; line-height: 20px;} #section04 .box_con .box_wrap .box .txt02{width: 100%; height: 70px;} #section04 .box_con .box_wrap .box .txt02 p{font-size: 20px; line-height: 28px;} #section04 .box_con .box_wrap .box01 .txt{background: linear-gradient(130deg,rgba(255, 192, 62, 1) 0%, rgba(255, 162, 0, 1) 100%);} #section04 .box_con .box_wrap .box02 .txt{background: linear-gradient(130deg,rgba(255, 132, 71, 1) 0%, rgba(255, 106, 71, 1) 100%);} #section04 .box_con .box_wrap .box03 .txt{background: linear-gradient(130deg,rgba(0, 192, 169, 1) 0%, rgba(0, 153, 135, 1) 100%);} #section04 .box_con .box_wrap .box03{gap:10px;} #section04 .box_con .box_wrap .box03 .txt01{height: auto;padding: 15px 0;} #section04 .box_con .box_wrap .box03 .txt02{margin-top: 10px;} /* section05 */ #section05{padding-bottom: 170px;background: url(/assets/images/main/sec05_bg01.png)top left no-repeat,url(/assets/images/main/sec05_bg02.png)bottom right no-repeat var(--yellow);} #section05 .slide_wrap{position: relative;} #section05 .slide_wrap::after{content:'';position: absolute;left: 50%;top: 0; transform:translateX(-50%);width: 485px;height: 330px;border-radius:30px;border:15px solid #222;} #section05 .sec05_slide{position: relative;} #section05 .sec05_slide::before{content:'';position: absolute;top: 0; left: 0;width: 240px;height: 100%; background: linear-gradient(90deg,#ffb502 5%, transparent 100%); z-index: 100;} #section05 .sec05_slide::after{content:'';position: absolute;top: 0; right: 0;width: 240px;height: 100%; background: linear-gradient(90deg,transparent 5%,#ffb502 100%); z-index: 100;} #section05 .sec05_slide li{width: 485px;margin-right: 60px;} #section05 .sec05_slide li .img_wrap{position:relative; width:100%; padding-bottom:67.01%;border-radius:30px;overflow: hidden;} #section05 .sec05_slide li .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} #section05 .sec05_slide li .txt_wrap{text-align: center;margin-top: 40px;color: #fff;} #section05 .sec05_slide li .txt_wrap span{display: block;font-size: 20px;} #section05 .sec05_slide li .txt_wrap p{font-size: 30px;font-weight: 700; margin-top: 15px;} #section05 .slick-arrow{top: 40%;} /* section06 */ #section06{background: url(/assets/images/main/sec06_bg01.jpg)center top no-repeat;background-size: 100%;} #section06 .graph_wrap{position: relative; margin-bottom: 150px;margin-top: 80px;} #section06 .graph_box{position: relative;display: flex;align-items: center;justify-content: center;z-index: 100;} #section06 .graph_box img.graph01{position: absolute;top: 45%; left: 47%;transform:translate(-50%,-50%);z-index: 100;} #section06 .graph_wrap .txt{position: absolute; display: flex;justify-content: center;flex-direction: column;width: 360px; height: 100px; line-height: 36px;border:1px solid var(--purple); background: #fff; border-radius:12px;text-align: center; box-shadow:0px 0px 20px rgba(118,18,247,.15);} #section06 .graph_wrap .txt01{top: 0; left: 0;} #section06 .graph_wrap .txt02{top: 0;right: 0;} #section06 .graph_wrap .txt03{bottom: 0; left: 0;} #section06 .graph_wrap .txt04{bottom: 0; right: 0;} #section06 .graph_wrap .txt p{font-size: 30px; color: var(--purple);} #section06 .graph_wrap .txt span{display: block;font-size: 20px; color: #222;} #section06 .graph_wrap .txt em{display: block; position: absolute;background: var(--purple);z-index: -1;} #section06 .graph_wrap .txt01 em{left: 100%; width: 110px;height: 2px;transform: rotate(27deg);bottom: 46px;transform-origin: left;} #section06 .graph_wrap .txt02 em{right: 100%;width: 170px;height: 2px;transform: rotate(-31deg);bottom: 46px;transform-origin: right;} #section06 .graph_wrap .txt03 em{left: 50%;width: 2px;height: 160px;transform: rotate(67deg) translateX(-50%);bottom: 100%;transform-origin: bottom;} #section06 .graph_wrap .txt04 em{left: 50%;width: 2px;height: 240px;transform: rotate(-67deg) translateX(-50%);bottom: 102%;transform-origin: bottom} #section06 .box_wrap_st01 .box .img_wrap{position:relative; width:100%; padding-bottom:66.66%;} #section06 .box_wrap_st01 .box .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} /* section07 */ #section07{padding: 0; background: #e9f9fb;} #section07 .box_con_wrap{padding: 100px 0;} #section07 .graph_box_st01{background: rgba(41,197,220,.1);} #section07 .graph_box_st01 .graph_wrap .tit{height: 40px; border-radius:20px;} #section07 .graph_box_st01 .graph .level_wrap p:first-child{margin-top: 42px;} #section07 .graph_box_st01 .graph .level_wrap p:only-child{margin-top: 0;} #section07 .graph_box_st01 .graph_wrap01 .tit{background: linear-gradient(90deg,rgba(169, 69, 253, 1) 0%, rgba(99, 128, 246, 1) 100%);} #section07 .graph_box_st01 .graph_wrap02 .tit{background: linear-gradient(90deg,#5bbbc9 0%, #85d10d 100%);} #section07 .graph_box_st01 .graph_wrap03 .tit{background: #deb80d;} #section07 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(1){color: var(--purple);} #section07 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(2){color: #6380f6;} #section07 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(1) em{background: var(--purple);} #section07 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(2) em{background: #8fa5fb;} #section07 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(3) em{background: #6380f6;} #section07 .graph_box_st01 .graph_wrap02 .graph .bot_txt p:nth-child(1){color: #5bbbc9;} #section07 .graph_box_st01 .graph_wrap02 .graph .bot_txt p:nth-child(2){color: #85d10d;} #section07 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(1) em{background: #5bbbc9;} #section07 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(2) em{background: #ade249;} #section07 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(3) em{background: #85d10d;} #section07 .graph_box_st01 .graph_wrap03 .graph .bot_txt p:nth-child(1){color: #deb80d;} #section07 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(1) em{background: #deb80d;} #section07 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(2) em{background: #deb80d;} #section07 .box_wrap_st02 .box .img{position:relative; width:100%; padding-bottom:56.25%;} #section07 .box_wrap_st02 .box .img img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} /* section08 */ #section08{padding: 0; background: #fff6e5;} #section08 .box_con_wrap{padding: 100px 0;} #section08 .graph_box_st01{background: rgba(255,168,0,.1);} #section08 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(1){color: #5bbbc9;} #section08 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(2){color: #e9b852;} #section08 .graph_box_st01 .graph_wrap .txt_wrap .txt{width: 160px;height: 150px;} #section08 .graph_box_st01 .graph_wrap01 .txt_wrap{position: relative;} #section08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt{padding: 40px 0px 50px;} #section08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(1) em{background: #5bbbc9;} #section08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(2) em{background: #e9b852;} #section08 .graph_box_st01 .graph_wrap01 .txt_wrap p.center{position: absolute;left: 50%;bottom: 20px; transform:translateX(-50%);font-size: 16px;color: #222;font-weight: 500;} #section08 .graph_box_st01 .graph_wrap02 .graph .bot_txt p:nth-child(1){color: #c69263;} #section08 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(1) em{background: #85d10d;} #section08 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(2) em{background: #c69263;} #section08 .graph_box_st01 .graph_wrap03 .graph .bot_txt p:nth-child(1){color: #d13191;} #section08 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(1) em{background: #d13191;} #section08 .graph_box_st01 .graph_wrap04 .graph .bot_txt p:nth-child(1){color: #a945fd;} #section08 .graph_box_st01 .graph_wrap04 .txt_wrap .txt:nth-child(1) em{background: #a945fd;} #section08 .box_wrap_st02 .box .img{position:relative; width:100%; padding-bottom:56.25%;} #section08 .box_wrap_st02 .box .img img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} /* section09 */ #section09{padding: 0; background: #f4f9ff;} #section09 .box_con_wrap{padding: 100px 0;} #section09 .graph_box_st01{background: rgba(32,147,255,.1);} #section09 .graph_box_st01 .graph_wrap .tit{height: 40px; border-radius:20px;} #section09 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(1) em{background: #fa8536;} #section09 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(2) em{background: #85d10d;} #section09 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(1) em{background: #d13191;} #section09 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(2) em{background: #a945fd;} #section09 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(1) em{background: #076fb6;} #section09 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(2) em{background: #5bbbc9;} #section09 .box_wrap_st02 .box .img{position:relative; width:100%; padding-bottom:56.25%;} #section09 .box_wrap_st02 .box .img img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} /* section10 */ #section10{background: url(/assets/images/main/sec13_bg01.png)top left 230px no-repeat,url(/assets/images/main/sec13_bg02.png)top 40% right 90px no-repeat,url(/assets/images/main/sec13_bg03.png)bottom 30% left no-repeat;} #section10 .box_wrap_st02 .box .txt_wrap{padding: 0;} #section10 .box_wrap_st02 .box .img{position:relative; width:100%; padding-bottom:56.26%;margin-top: 0;} #section10 .box_wrap_st02 .box .img img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} #section10 .box_wrap_st02 .box .txt{padding: 40px 40px 50px;} #section10 .box_wrap_st02 .box .txt strong{display: block;font-size: 20px; color: #999;text-align: left; line-height: 30px;font-weight:400;} #section10 .box_wrap_st02 .box .txt span{position: relative;padding-left: 40px;text-align: left; margin-top: 30px;} #section10 .box_wrap_st02 .box .txt span::after{content:'!';position: absolute;top: 3px; left: 0;display: flex;align-items: center;justify-content: center;width: 24px; height: 24px; color: #fff;font-size: 16px; font-weight: 900; background: var(--orange); border-radius:50%;} #section10 .box_wrap_st02 .box02 .txt span::after{background: var(--green);} #section10 .box_wrap_st02 .box03 .txt span::after{background: var(--blue);} #section10 .box_wrap_st02 .box04 .txt span::after{background: var(--purple02);} #section10 .box_wrap_st02 .box .txt span em{font-weight: 700;} #section10 .graph_box_st01{background: rgba(32, 147, 255, .1);} #section10 .graph_box_st01 .graph_box{gap:0;} #section10 .graph_box_st01 .graph_wrap .tit{width: 130px; height: 40px; border-radius:20px;margin: 0 auto 20px;a} #section10 .graph_box_st01 .txt_wrap .txt{height: 150px;} #section10 .graph_box_st01 .txt_wrap .txt p{padding-bottom: 20px;} #section10 .graph_box_st01 .txt_wrap .txt span{position: absolute;bottom: 30px;left: 50%;transform:translateX(-50%);font-size: 14px; color: #999;font-weight: 700;width: 100%;text-align: center;} #section10 .graph_box_st01 .graph_wrap01 .tit{background: #fa8536;} #section10 .graph_box_st01 .graph_wrap01 .txt_wrap .txt em{background: #fa8536;} #section10 .graph_box_st01 .graph_wrap02 .tit{background: #d13191;} #section10 .graph_box_st01 .graph_wrap02 .txt_wrap .txt em{background: #d13191;} #section10 .graph_box_st01 .graph_wrap03 .tit{background: #a945fd;} #section10 .graph_box_st01 .graph_wrap03 .txt_wrap .txt em{background: #a945fd;} #section10 .graph_box_st01 .graph_wrap04 .tit{background: #076fb6;} #section10 .graph_box_st01 .graph_wrap04 .txt_wrap .txt em{background: #076fb6;} #section10 .graph_box_st01 .graph_wrap05 .tit{background: #5bbbc9;} #section10 .graph_box_st01 .graph_wrap05 .txt_wrap .txt em{background: #5bbbc9;} /*section11*/ #section11{padding: 320px 0;background: url(/assets/images/main/sec14_bg01.png)right top 100px no-repeat,url(/assets/images/main/sec14_bg02.png)left bottom 100px no-repeat #f7f7f7;} #section11 .sec_tit01{margin-bottom: 90px;} #section11 .sec_tit01 span{margin-top: 0; margin-bottom: 20px;} .quick_menu01{display: none;position: fixed; right: 60px; top: 50%; transform:translateY(-50%);line-height: 1;z-index: 1000;} .quick_menu01 .box{position: relative;} .quick_menu01 .box .txt{position: absolute;left: 50%;bottom: 40px; transform:translateX(-50%);text-align: center;width: 100%;} .quick_menu01 .box .txt span{display: block;font-size: 13px; line-height: 1; color: #fff; font-weight: 500;} .quick_menu01 .box .txt p{font-size: 18px; line-height: 24px; margin-top: 8px;color: #fff; } .quick_menu01 .top_btn{display: flex; align-items: center;justify-content: center; width: 60px; height: 60px; background: #222; border-radius:50%;margin: 0 auto;} .quick_menu02{position: fixed;bottom: 0;left: 50%;transform:translateX(-50%); width: 1000px;padding: 20px; background: var(--pink); border-radius:30px 30px 0 0; line-height: 1;z-index: 1000;} .quick_menu02.rel{position: absolute;bottom: 399px;} .quick_menu02 .box_wrap{display: flex;align-items: center;justify-content: space-between; } .quick_menu02 .box_wrap .box{position: relative;display: flex;align-items: center;} .quick_menu02 .box_wrap .box .img{position: absolute;bottom: 0; left: 0;width: 155px;} .quick_menu02 .box_wrap .box .img img{border-radius:10px;} .quick_menu02 .box_wrap .box .txt_wrap{padding-left: 220px;color: #fff;} .quick_menu02 .box_wrap .box .txt_wrap span{display: block; font-size: 16px; font-weight: 500;} .quick_menu02 .box_wrap .box .txt_wrap p{font-size: 20px;margin-top: 10px;} .quick_menu02 .box_wrap a{display: flex;align-items: center;justify-content: center;gap:10px; width: 180px; height: 50px; font-size: 16px; color: #fff; background: var(--yellow); border-radius:25px;} /*footer*/ #footer{line-height: 1;border-top: 1px solid #ddd;} #footer .inner{width: 1400px;} #footer .f_top{border-bottom: 1px solid #ddd;} #footer .f_top .inner{display: flex;align-items: center;justify-content: space-between;height: 60px;} #footer .f_top .a_wrap{display: flex;gap:50px;align-items: center;} #footer .f_top .a_wrap a{font-size: 14px; color: #999;} #footer .f_top .a_wrap a.yellow{color: var(--yellow);} #footer .f_top .a_wrap a.pay_btn{display: flex;align-items: center;justify-content: center;gap:10px;width: 153px; height: 32px; border:1px solid #2093ff; border-radius:5px;font-size: 14px; color: #2093ff; background: #e8f4ff;} #footer .f_top .link_wrap{display: flex;align-items: center;gap:18px;} #footer .f_bot{padding: 40px 0;} #footer .f_bot .inner{display: flex;justify-content: space-between;} #footer .f_bot .left a.f_logo{display: block; width: fit-content; margin-bottom: 30px;} #footer .f_bot .left p{font-size: 14px; color: #999; line-height: 24px;} #footer .f_bot .left address i{display: inline-block;width: 20px;} #footer .f_bot .left p.copy{display: flex;align-items: center;gap:15px;margin-top: 10px;} #footer .f_bot .left a.admin_login_btn{display: flex;align-items: center;justify-content: center;gap:5px;width: 125px; height: 25px; border:1px solid #333;font-size: 12px; color: #333; border-radius:3px;} #footer .f_bot .left .logo_wrap{display: flex;align-items: center;gap:20px; margin-top: 30px;} #footer .f_bot .right{padding-right: 100px;} #footer .f_bot .right h4{font-size: 18px; color: #222;margin-bottom: 20px;} #footer .f_bot .right .tel{display: flex;align-items: center;gap:10px; margin-bottom: 20px;} #footer .f_bot .right .tel strong{font-size: 24px; color: #222; } #footer .f_bot .right ul li{font-size: 14px; color: #999; font-weight: 700; line-height: 24px;} /* ===sub======================================= */ #sub_contents{min-height: calc(100vh - 520px);padding: 80px 0px 180px;} #sub_contents.no_p{padding: 0;} #sub_contents.no_pb{padding-bottom: 0;} .contop{margin-bottom: 40px;} .contop .inner{display: flex;align-items: center;justify-content: space-between;} .contop h3{font-size: 40px; color: #222; font-weight: 700;} .contop ul.sub_nav{display: flex;align-items: center;gap:23px;} .contop ul.sub_nav li{position: relative;font-size: 16px; color: #999;} .contop ul.sub_nav li img{display: block;} .contop ul.sub_nav li:not(:last-child)::after{content:'';position: absolute;top: 50%;right: -13px;transform:translateY(-50%); width: 4px; height: 4px; background: #eee; border-radius:50%;} .contop.center .inner{justify-content: center;} .depth03_wrap{display: flex; justify-content: space-around; align-items: center;border-radius: 30px;border:1px solid #ddd; margin-bottom: 60px; overflow: hidden;} .depth03_wrap li a{position: relative;display: block;font-size: 16px; color: #999; padding: 17px 0;} .depth03_wrap li.on a{color: var(--blue); font-weight: 700;} .depth03_wrap li.on a::after{content:'';position: absolute;bottom: 0px;left: 50%;transform:translateX(-50%);width: calc(100% + 40px);height: 3px; background: var(--blue);} .ws{white-space:pre-wrap;} img{max-width: 100%;} h4.h4_tit01{font-size: 30px;color: #222; margin-bottom: 30px; line-height: 1.5;} h4.h4_tit02{position: relative;font-size: 30px;color: #222; font-family: 'YeogiOttaeJalnan'; margin-bottom: 15px;line-height: 1.5; padding-left: 22px;} h4.h4_tit02::after{content:'';position: absolute;top: 8px; left: 0;width: 6px; height: 28px; border-radius:3px;background: var(--purple);} h4.h4_tit02.orange::after{background: var(--orange);} input:focus, select:focus, textarea:focus{outline:2px solid var(--blue);} input.chk_st01{display: none;line-height: 1;} input.chk_st01 + label{position: relative;padding-left: 28px;font-size: 16px; color: #222;cursor:pointer;} input.chk_st01 + label::after{content:'';position: absolute;left: 0;top: 3px; width: 18px; height: 18px; border:1px solid #ddd; border-radius:2px;background: url(/assets/images/sub/chk_icon02.png)center no-repeat #fff; } input.chk_st01:checked + label::after{background: url(/assets/images/sub/chk_icon01.png)center no-repeat var(--blue);border:1px solid var(--blue);} input.ra_st01{display: none;line-height: 1;} input.ra_st01 + label{position: relative;padding-left: 28px;font-size: 16px; color: #222;cursor:pointer;} input.ra_st01 + label::after{content:'';position: absolute;left: 0;top: 3px; width: 18px; height: 18px; border:1px solid #ddd; border-radius:50%;background: #fff; } input.ra_st01:checked + label::after{border:5px solid var(--blue);} .flex input.ra_st01 + label::after, .flex input.chk_st01 + label::after{top: 0px;} select{min-width: 80px;padding: 0px 10px;background: url(/assets/images/sub/select_icon01.png)center right 10px no-repeat; -webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none;} .btn_wrap_st01{display: flex;align-items: center;justify-content: center;gap:10px;margin-top: 75px;} .btn_wrap_st01 a{display: flex;align-items: center;justify-content: center;gap:10px;width: 240px; height: 70px; border-radius:12px;font-size: 18px; color: #fff;font-weight: 700;} .btn_wrap_st01 a img{display: block;} .search_wrap_st01{display: flex;align-items: center;justify-content: center;gap:10px; margin-top: 60px;} .search_wrap_st01 input[type="text"], .search_wrap_st01 select{height: 70px;border:1px solid #ddd;padding: 0px 20px; border-radius:12px;font-size: 18px; color: #666;} .search_wrap_st01 select{width: 200px;} .search_wrap_st01 input[type="text"]{width: 400px;} .search_wrap_st01 input[type="text"]::placeholder{color: #999;} .search_wrap_st01 a.search_btn{display: flex;align-items: center;justify-content: center;width: 120px;height: 70px;border-radius:12px;font-size: 18px;color: #fff;background: #333; } .arr_wrap_st01{display: flex;align-items: center;justify-content: space-between;margin-top: 60px;} .arr_wrap_st01 .btn{display: flex;align-items: center;gap:20px;} .arr_wrap_st01 .btn em{display: flex;align-items: center;justify-content: center;width: 100px; height: 34px; font-size: 14px; color: #fff; background: #333; border-radius:17px;} .arr_wrap_st01 .btn p{max-width: 300px;font-size: 18px; color: #666;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arr_wrap_st01 .btn:hover p{text-decoration: underline;} .pc_tbl{display: block;} .mob_tbl{display: none;} table.tbl01{width: 100%; table-layout: fixed;} table.tbl01 th p{width: 100%;font-size: 16px; color: #222;font-weight: 700;padding: 20px 0;text-align: center;background: #e8f4ff;} table.tbl01 th:first-child p{border-radius:12px 0 0 12px;} table.tbl01 th:last-child p{border-radius:0 12px 12px 0;} table.tbl01 td{padding: 10px 15px;font-size: 16px; line-height: 1.4; color: #666;text-align: center;border-bottom: 1px solid #ddd;} table.tbl02{width: 100%; table-layout: fixed; border-top: 2px solid #333;} table.tbl02 tr{border-bottom: 1px solid #ddd;} table.tbl02 th{padding: 30px;font-size: 18px; color: #666; line-height: 28px;text-align: center;} table.tbl02 td{padding: 20px;font-size: 18px; color: #666; line-height: 28px;text-align: center;} table.tbl03{width: 100%; table-layout: fixed;border-top: 2px solid #333;} table.tbl03 th{padding: 20px;font-size: 18px; line-height: 1.4; color: #333;border-bottom: 1px solid #ddd;} table.tbl03 td{padding: 20px;font-size: 18px; line-height: 1.4; color: #666;text-align: center;border-bottom: 1px solid #ddd;} table.tbl03 td.left{text-align: left;} table.tbl03 td a{color: #666;} table.tbl03 td input, table.tbl03 td textarea{border-radius:6px; border:1px solid #ddd; padding: 0px 20px;} table.tbl03 td textarea{padding: 20px;} .skin table.tbl03 td{text-align: left;} ul.ul_st01 li{position: relative;font-size: 24px; color: #333;margin-left: 10px; line-height: 1.5;padding: 15px 0 15px 25px;} ul.ul_st01 li::after{content:'';position: absolute;top: 31px; left: 0;width: 6px; height: 6px; border-radius:50%; background: var(--purple);} ul.ul_st01 li:not(:last-child){border-bottom: 1px solid #ddd;} ul.ul_st01.lightgreen li::after{background: var(--lightgreen);} ul.ul_st01.blue li::after{background: var(--blue);} ul.ul_st01.purple li::after{background: var(--purple);} ul.ul_st02 li{position: relative;text-align: left;padding-left: 20px;font-size: 20px; line-height: 30px;color: #666;} ul.ul_st02 li::after{content:'';position: absolute;top: 11px; left: 0;width: 6px;height: 6px; background: var(--orange); border-radius:50%;} ul.ul_st02.lightgreen li::after{background: var(--lightgreen);} ul.ul_st02.blue li::after{background: var(--blue);} ul.ul_st02.purple li::after{background: var(--purple);} a.more_btn_st02{display: flex;align-items: center;justify-content: center;width: 240px; height: 60px; font-size: 20px; color: #fff;font-weight: 500; border-radius:30px;margin: 0 auto; } a.more_btn_st02.mt{margin: 60px auto 0; } /* sub0101 */ .sub0101_wrap{line-height: 1;} .sub0101_wrap .list_wrap{border-top: 2px solid #333;} .sub0101_wrap .list_wrap .list{padding: 0 20px;border-bottom: 1px solid #ddd;} .sub0101_wrap .list_wrap .list .tit_wrap{display: flex;align-items: center;justify-content: space-between;cursor:pointer;padding: 28px 0;} .sub0101_wrap .list_wrap .list .tit_wrap .left{display: flex;align-items: center;width: calc(100% - 180px);font-size: 18px;font-weight: 700;} .sub0101_wrap .list_wrap .list .tit_wrap .left em{display: block;width: 46px;color: #999;font-weight: 700;} .sub0101_wrap .list_wrap .list .tit_wrap .left p{width: calc(100% - 46px);display: flex;align-items: center;color: #222;line-height: 1.2;} .sub0101_wrap .list_wrap .list .tit_wrap .left p span{display: block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: calc(100% - 28px);} .sub0101_wrap .list_wrap .list .tit_wrap .left p b.new{display: flex;align-items: center;justify-content: center; background: var(--blue);width: 18px; height: 18px; border-radius:4px;font-size: 12px; color: #fff; font-weight: 700; margin-left: 10px;} .sub0101_wrap .list_wrap .list .tit_wrap .right{width: 180px;display: flex;align-items: center;gap:25px;justify-content: flex-end;} .sub0101_wrap .list_wrap .list .tit_wrap .right span{font-size: 16px; color: #999;font-weight: 500;} .sub0101_wrap .list_wrap .list .tit_wrap .right .arr img{display: block;transition:.3s;} .sub0101_wrap .list_wrap .list .tit_wrap.on .right .arr img{transform:rotate(180deg);} .sub0101_wrap .list_wrap .list .txt_wrap{display: none;font-size: 16px;color: #666; line-height: 1.6;padding-bottom: 30px;} .sub0101_wrap .list_wrap .list .txt_wrap p, .sub0101_wrap .list_wrap .list .txt_wrap span, .sub0101_wrap .list_wrap .list .txt_wrap strong, .sub0101_wrap .list_wrap .list .txt_wrap em, .sub0101_wrap .list_wrap .list .txt_wrap b{font-family: "Noto Sans KR", sans-serif;} /* 에디터에서 고른 글꼴(인라인 style)이 적용되도록 !important 제거 */ /* sub0102 */ .sub0102_wrap{line-height: 1;} .sub0102_wrap .con:not(:last-child){margin-bottom: 100px;} .sub0102_wrap .list_wrap{border-top: 2px solid #333;} .sub0102_wrap .list_wrap .list{padding: 30px 20px;border-bottom: 1px solid #ddd;} .sub0102_wrap .list_wrap .list .tit_wrap p{font-size: 18px; color: #222; font-weight: 700;line-height: 1.5;} .sub0102_wrap .list_wrap .list .tit_wrap .date{display: flex;align-items: center;gap:15px;font-size: 16px; margin-top: 12px;} .sub0102_wrap .list_wrap .list .tit_wrap .date strong{display: flex;align-items: center;gap:10px;color: var(--blue); font-weight: 700;} .sub0102_wrap .list_wrap .list .tit_wrap .date strong img{display: block;} .sub0102_wrap .list_wrap .list .tit_wrap .date span{color: #666;font-weight: 500;} .sub0102_wrap .list_wrap .list .edit_wrap{font-size: 16px;color: #666; line-height: 1.6;padding-top: 30px;} .sub0102_wrap .list_wrap .list .edit_wrap img{display: block;width: 100%;} .sub0102_wrap .list_wrap.past_list_wrap .list{display: flex;align-items: center;gap:40px} .sub0102_wrap .list_wrap.past_list_wrap .list .edit_wrap{width: 400px;padding-top: 0;} .sub0102_wrap .list_wrap.past_list_wrap .list .edit_wrap .img_wrap{position:relative; width:100%; padding-bottom:50%;} .sub0102_wrap .list_wrap.past_list_wrap .list .edit_wrap .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .sub0102_wrap .list_wrap.past_list_wrap .list .tit_wrap{width: calc(100% - 440px);} /* sub02 - 공통*/ .sub02_wrap{line-height: 1;padding: 0;} .sub02_wrap .con{padding: 100px 0;} .sub02_wrap .con.pt0{padding-top: 0;} .sub02_wrap .top_con .box_wrap{background: #fff; padding: 60px; border-radius:40px;} .sub02_wrap .top_con .flex_wrap{display: flex;gap:40px;align-items: center;} .sub02_wrap .top_con .flex_wrap .img_box{width: calc((100% - 40px) / 2);} .sub02_wrap .top_con .flex_wrap .txt_box{width: calc((100% - 40px) / 2);} .sub02_wrap .bot_con{padding: 200px 0;background: url(/assets/images/sub/sub02_bot_bg02.png) right top 100px no-repeat, url(/assets/images/sub/sub02_bot_bg01.png) left bottom 100px no-repeat var(--blue);} .sub02_wrap .bot_con .sec_tit01{margin-bottom: 100px;} .sub02_wrap .bot_con .sec_tit01 span{margin-top: 0;margin-bottom: 20px;} .sub02_wrap .con .slide01 .slick-arrow{top: 57%;} .sub02_wrap .con .slide01 .slick-list{width: calc(100% + 20px); overflow: visible; padding-top: 55px; margin-bottom: 60px;} .sub02_wrap .con .slide01 li{margin-right: 20px;text-align: center;transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .sub02_wrap .con .slide01 li:hover{transform:translateY(-20px);} .sub02_wrap .con .slide01 li a{position: relative;display: block; font-size: 18px; padding: 35px 40px 40px; background: #fff; border:2px solid var(--orange); border-radius:30px;box-shadow:8px 8px 16px rgba(0,0,0,.08);} .sub02_wrap .con .slide01 li .img_wrap{position:relative; width:100%; padding-bottom:52.28%;overflow: hidden; border-radius:12px;} .sub02_wrap .con .slide01 li .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .sub02_wrap .con .slide01 li span{display: block;line-height: 28px;margin: 30px 0px 40px;height: 140px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-wrap:break-word;color: #666;} .sub02_wrap .con .slide01 li strong{display: block;color: #999;font-weight: 400;} .sub02_wrap .con .box_wrap_st02 .box_col{display: flex;flex-direction: column;gap:40px;} .sub02_wrap .con .box_wrap_st02 .box_col .box{width: 100%;} .sub02_wrap .con .box_wrap_st02 .box_col .box02{position: relative;overflow: visible;} .sub02_wrap .con .box_wrap_st02 .box_col .box02::after{content:'';position: absolute;top: -26px;left: 50%;transform:translateX(-50%); background: url(/assets/images/sub/sub0201_arr01.png)center no-repeat; width: 42px; height: 16px;} .sub02_wrap .con .box_wrap_st02 .box_col .txt_wrap{padding: 30px 40px;} .sub02_wrap .con .box_row .box{position: relative;} .sub02_wrap .con .box_row .box .img{margin-top: 0;} .sub02_wrap .con .box_row .box .txt{margin-top: 25px;} .sub02_wrap .con .box_row .box .txt_wrap{padding: 30px 40px;} .sub02_wrap .con .box_row.arr .box{overflow: visible;} .sub02_wrap .con .box_row.arr .box:not(:last-child)::after{content:'';position: absolute;top: 50%;right: -26px;transform:translateY(-50%); background: url(/assets/images/sub/sub0201_arr02.png)center no-repeat; width: 16px; height: 43px;} .sub02_wrap .con .tit_bar{padding: 60px 0;} .sub02_wrap .con .tit_bar .sec_tit01{margin-bottom: 0;} .slide_box_wrap_st01{display: flex;flex-wrap:wrap;justify-content: center;gap:105px 30px; margin-top: 120px;} .slide_box_wrap_st01 .box{width: calc((100% - 30px) / 2);} .slide_box_wrap_st01 .top{margin-bottom: 20px;} .slide_box_wrap_st01 .top .tit{position: relative;display: flex;align-items: center;justify-content: center; height: 60px;min-width: 385px; width: fit-content; border-radius:20px 20px 0 0;color: #fff;} .slide_box_wrap_st01 .top .tit .img{position: absolute;bottom: 0;left: 100%;width: max-content;} .slide_box_wrap_st01 .top .tit .img img{vertical-align: bottom;} .slide_box_wrap_st01 .top .tit p{font-size: 24px; } .slide_box_wrap_st01 .top .tit span{font-size: 20px;} .slide_box_wrap_st01 .top ul.ul_st02{padding: 5px 5px 7px 10px; min-height: 90px;} .slide_box_wrap_st01 .top ul.ul_st02 li{font-size: 16px; line-height: 26px;padding-left: 14px;} .slide_box_wrap_st01 .top ul.ul_st02 li::after{width: 4px; height: 4px;} .slide_box_wrap_st01 .txt_wrap{display: flex;flex-wrap:wrap;} .slide_box_wrap_st01 .txt_wrap .txt{flex:1;} .slide_box_wrap_st01 .txt_wrap strong{display: flex;align-items: center;justify-content: center; height: 40px;font-size: 18px;width: 100%;} .slide_box_wrap_st01 .txt_wrap .b_txt{font-size: 16px; line-height: 26px;} .slide_box_wrap_st01 .txt_wrap .b_txt b{display: block;} .slide_box_wrap_st01 .txt_wrap .b_txt b:not(:last-child){margin-bottom: 10px;} .slide_box_wrap_st01 .slide{overflow: hidden; border:1px solid #ddd; background: #f5f5f5; border-radius:20px;} .slide_box_wrap_st01 .slide .img_wrap{position:relative; width:100%; padding-bottom:51.28%;} .slide_box_wrap_st01 .slide .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .slide_box_wrap_st01 .slick-arrow{top: 50%;width: 60px; height: 60px;} .slide_box_wrap_st01 .slick-prev, .slide_box_wrap_st01 .slick-next{background-size: 12px;} .slide_box_wrap_st01 .slick-prev{left: 10px;} .slide_box_wrap_st01 .slick-next{right: 10px;} /* 주황 */ .slide_box_wrap_st01 .box.orange .txt_wrap strong{background: #ffeece;} .slide_box_wrap_st01 .box.orange .txt_wrap .txt:not(:last-child){border-right: 1px solid var(--orange);} /* 초록 */ .slide_box_wrap_st01 .box.lightgreen .txt_wrap strong{background: #f3fae6;} .slide_box_wrap_st01 .box.lightgreen .txt_wrap .txt:not(:last-child){border-right: 1px solid var(--lightgreen);} /* 파랑 */ .slide_box_wrap_st01 .box.blue .txt_wrap strong{background: #e8f4ff;} .slide_box_wrap_st01 .box.blue .txt_wrap .txt:not(:last-child){border-right: 1px solid var(--blue);} /* 보라 */ .slide_box_wrap_st01 .box.purple .txt_wrap strong{background: #f7e9ff;} .slide_box_wrap_st01 .box.purple .txt_wrap .txt:not(:last-child){border-right: 1px solid var(--purple);} /* 노랑 */ .slide_box_wrap_st01 .box.yellow .txt_wrap strong{background: #fff7e5;} .slide_box_wrap_st01 .box.yellow .txt_wrap .txt:not(:last-child){border-right: 1px solid var(--yellow);} /* sub0201 */ .sub0201 .top_con{background: url(/assets/images/sub/sub0201_bg01.png)top left 180px no-repeat, url(/assets/images/sub/sub0201_bg02.png)bottom right 150px no-repeat #af23ff;} .sub0201 .con07{background: #fff6e5;} .sub0201 .con07 .box_wrap{margin-bott om: 60px;} .sub0201 .con07 .box_wrap .box{display: flex;gap:30px;} .sub0201 .con07 .box_wrap .box:not(:last-child){margin-bottom: 10px;} .sub0201 .con07 .box_wrap .box .left{display: flex;align-items: center;position: relative;flex:670;padding: 40px;background: #fff; border:1px solid #ddd; border-radius:20px;} .sub0201 .con07 .box_wrap .box .left::after{content:'';position: absolute; top: 50%;right: -60px;transform:translateY(-50%);background: url(/assets/images/sub/sub0201_bg03.png)center no-repeat; width: 90px; height: 20px; background-size: cover;} .sub0201 .con07 .box_wrap .box .right{display: flex;align-items: center;gap:20px;flex:500;padding: 20px; border-radius:20px;background: linear-gradient(90deg,var(--orange) 0%, var(--yellow) 100%);} .sub0201 .con07 .box_wrap .box .right .img{width: 110px;} .sub0201 .con07 .box_wrap .box .right .txt{width: calc(100% - 130px);} .sub0201 .con07 .box_wrap .box .right .txt p{font-size: 20px; color: #fff;} .sub0201 .con07 .box_wrap .box .right .txt span{display: block;font-size: 17px; color: #fff;line-height: 28px; margin-top: 10px;} .sub0201 .con08{background: #29c5dc;} .sub0201 .con08 .graph_box_st01{background: #d5f4f8;} .sub0201 .con08 .graph_box_st01 .graph_wrap .tit{height: 40px; border-radius:20px;} .sub0201 .con08 .graph_box_st01 .graph .level_wrap p:first-child{margin-top: 42px;} .sub0201 .con08 .graph_box_st01 .graph .level_wrap p:only-child{margin-top: 0;} .sub0201 .con08 .graph_box_st01 .graph_wrap01 .tit{background: linear-gradient(90deg,rgba(169, 69, 253, 1) 0%, rgba(99, 128, 246, 1) 100%);} .sub0201 .con08 .graph_box_st01 .graph_wrap02 .tit{background: linear-gradient(90deg,#5bbbc9 0%, #85d10d 100%);} .sub0201 .con08 .graph_box_st01 .graph_wrap03 .tit{background: #deb80d;} .sub0201 .con08 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(1){color: var(--purple);} .sub0201 .con08 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(2){color: #6380f6;} .sub0201 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(1) em{background: var(--purple);} .sub0201 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(2) em{background: #8fa5fb;} .sub0201 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(3) em{background: #6380f6;} .sub0201 .con08 .graph_box_st01 .graph_wrap02 .graph .bot_txt p:nth-child(1){color: #5bbbc9;} .sub0201 .con08 .graph_box_st01 .graph_wrap02 .graph .bot_txt p:nth-child(2){color: #85d10d;} .sub0201 .con08 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(1) em{background: #5bbbc9;} .sub0201 .con08 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(2) em{background: #ade249;} .sub0201 .con08 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(3) em{background: #85d10d;} .sub0201 .con08 .graph_box_st01 .graph_wrap03 .graph .bot_txt p:nth-child(1){color: #deb80d;} .sub0201 .con08 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(1) em{background: #deb80d;} .sub0201 .con08 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(2) em{background: #deb80d;} .sub0201 .con10{background: #f7e9ff;} .sub0201 .con10 .img_box{display: flex;flex-direction: column;gap:40px;padding: 60px;background: #fff;border-radius:40px;margin: 60px auto 90px;max-width: 920px;box-sizing: border-box;} .sub0201 .con10 .img_box .img{flex:initial;width: 100%;} .sub0201 .con10 .img_box .img img{display: block;width: 100%;} .sub0201 .con10 .box_wrap{display: flex;flex-direction: column;gap:60px;max-width: 900px;margin: 0 auto;} .sub0201 .con10 .box_wrap .box{width: 100%;} .sub0201 .con10 .box_wrap .box .slide_wrap img{border-radius:20px;} .sub0201 .con10 .slick-arrow{top: 50%;width: 60px; height: 60px;} .sub0201 .con10 .slick-prev, .sub0201 .con10 .slick-next{background-size: 12px;} .sub0201 .con10 .slick-prev{left: 10px;} .sub0201 .con10 .slick-next{right: 10px;} .sub0201 .con10 .cer_wrap{display: flex; justify-content: center; background: #fff; border-radius:20px; overflow: hidden;} .sub0201 .con10 .cer_wrap .cer{width: 100%;} .sub0201 .con10 .cer_wrap .cer .img{width: 100%;} .sub0201 .con10 .cer_wrap .cer img{display: block; width: 100%; height: auto; border: none;} .sub0201 .con10 .cer_wrap p{font-size: 20px; margin-top: 20px; color: #333; font-weight: 700;text-align: center;} /* sub0202 */ .sub0202 .top_con{background: url(/assets/images/sub/sub0201_bg01.png)top left 180px no-repeat, url(/assets/images/sub/sub0201_bg02.png)bottom right 150px no-repeat var(--blue);} .sub0202 .con02{background: #f3fae6;} .sub0202 .con02 .box_wrap{display: flex;gap:30px;align-items: center; margin-bottom: 60px;} .sub0202 .con02 .box_wrap .img_wrap, .sub0202 .con02 .box_wrap .txt_wrap{flex:1;} .sub0202 .con02 .box_wrap ul.ul_st02 li{color: #333; background: #fff;padding: 15px 50px; border-radius:32px;} .sub0202 .con02 .box_wrap ul.ul_st02 li:not(:last-child){margin-bottom: 10px;} .sub0202 .con02 .box_wrap ul.ul_st02 li::after{left: 30px;top: 28px;} .sub0202 .con03 .box_wrap{display: flex;gap:10px;} .sub0202 .con03 .box_wrap .box{position: relative;width: calc((100% - 30px) / 4); padding: 0px 10px 60px;background: #fff; border-radius:20px;} .sub0202 .con03 .box_wrap .box::after{content:'';position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%);width: calc(100% - 20px); height: calc(100% - 20px); border-radius:12px; border:3px solid var(--orange); pointer-events:none;} .sub0202 .con03 .box_wrap .box .icon{display: flex;align-items: center;justify-content: center;height: 185px;} .sub0202 .con03 .box_wrap .box .txt_wrap{text-align: center;} .sub0202 .con03 .box_wrap .box .txt_wrap p{font-size: 24px; color: #333;} .sub0202 .con03 .box_wrap .box .txt_wrap span{display: block;font-size: 18px; color: #666; line-height: 28px;margin-top: 30px;} .sub0202 .con05{background: #e9f9fb;} .sub0202 .con08 .graph_box_st01{background: #e8f4ff;} .sub0202 .con08 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(1){color: #5bbbc9;} .sub0202 .con08 .graph_box_st01 .graph_wrap01 .graph .bot_txt p:nth-child(2){color: #e9b852;} .sub0202 .con08 .graph_box_st01 .graph_wrap .txt_wrap .txt{width: 160px;height: 150px;} .sub0202 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap{position: relative;} .sub0202 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt{padding: 40px 0px 50px;} .sub0202 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(1) em{background: #5bbbc9;} .sub0202 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(2) em{background: #e9b852;} .sub0202 .con08 .graph_box_st01 .graph_wrap01 .txt_wrap p.center{position: absolute;left: 50%;bottom: 20px; transform:translateX(-50%);font-size: 16px;color: #222;font-weight: 500;} .sub0202 .con08 .graph_box_st01 .graph_wrap02 .graph .bot_txt p:nth-child(1){color: #c69263;} .sub0202 .con08 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(1) em{background: #85d10d;} .sub0202 .con08 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(2) em{background: #c69263;} .sub0202 .con08 .graph_box_st01 .graph_wrap03 .graph .bot_txt p:nth-child(1){color: #d13191;} .sub0202 .con08 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(1) em{background: #d13191;} .sub0202 .con08 .graph_box_st01 .graph_wrap04 .graph .bot_txt p:nth-child(1){color: #a945fd;} .sub0202 .con08 .graph_box_st01 .graph_wrap04 .txt_wrap .txt:nth-child(1) em{background: #a945fd;} .sub0202 .con09 .box_wrap{display: flex; gap:40px;margin-top: 60px; padding: 60px; background: #fef1e5; border-radius:40px;} .sub0202 .con09 .box_wrap .box{flex:1;} .sub0202 .con09 .box_wrap .box a.more_btn_st02{margin: 0;margin-top: 60px;} .sub0202 .con10 .box_wrap{display: flex;align-items: center;gap:80px;padding: 60px; border-radius:40px; background: url(/assets/images/sub/sub0202_bg01.png)bottom right no-repeat #fff; } .sub0202 .con10 .box_wrap .img{flex:440;} .sub0202 .con10 .box_wrap .txt_wrap{flex:600;} .sub0202 .con10 .box_wrap .txt_wrap .txt{position: relative;padding-top: 45px;} .sub0202 .con10 .box_wrap .txt_wrap .txt::after{content:'';position: absolute; top: 0; left: 0; width: 60px; height: 6px; background: var(--orange); border-radius:3px;} .sub0202 .con10 .box_wrap .txt_wrap .txt p{font-size: 20px; color: #666; line-height: 30px;} .sub0202 .con11 .box_wrap{display: flex;gap:30px;align-items: center;margin-bottom: 60px;} .sub0202 .con11 .box_wrap .box{flex:1;} .sub0202 .con11 .box_wrap .txt_wrap .txt{padding: 40px; border-radius:20px; background: #f3fae6;} .sub0202 .con11 .box_wrap .txt_wrap .txt:not(:last-child){margin-bottom: 20px;} .sub0202 .con11 .box_wrap .txt_wrap .txt p{font-size: 24px; color: #333;} .sub0202 .con11 .box_wrap .txt_wrap .txt span{display: block;font-size: 20px; color: #666; line-height: 30px; margin-top: 20px;} .sub0202 .con12{background: #f7e9ff;} .sub0202 .con12 .box_wrap .box{display: flex;align-items: center;gap:80px;padding: 30px 80px;background: #fff; border-radius:20px;} .sub0202 .con12 .box_wrap .box .cer_wrap, .sub0202 .con12 .box_wrap .box .txt_wrap{flex:1;} .sub0202 .con12 .box_wrap .box .cer_wrap{display: flex;gap:30px;} .sub0202 .con12 .box_wrap .box .cer_wrap img{border:1px solid #ddd;} .sub0202 .con12 .box_wrap .box .cer_wrap p{font-size: 20px; color: #333; font-weight: 700 ;text-align: center; margin-top: 15px;} .sub0202 .con12 .box_wrap .box ul.ul_st02 li{font-size: 24px; color: #333; line-height: 36px;} .sub0202 .con12 .box_wrap .box ul.ul_st02 li:not(:last-child){margin-bottom: 10px;} .sub0202 .con12 .box_wrap .box ul.ul_st02 li::after{top: 14px;background: var(--purple);} .sub0202 .con13 .box_wrap{display: flex;gap:10px;} .sub0202 .con13 .box_wrap .box{width: calc((100% - 30px) / 4);padding: 10px;background: #fff; border-radius:20px; box-shadow:3px 3px 6px rgba(0,0,0,.12);} .sub0202 .con13 .box_wrap .box .img{margin-bottom: 30px;} .sub0202 .con13 .box_wrap .box .img img{width: 100%;} .sub0202 .con13 .box_wrap .box .txt{text-align: center;padding: 0px 10px;} .sub0202 .con13 .box_wrap .box .txt p{font-size: 20px;margin-bottom: 15px;} .sub0202 .con13 .box_wrap .box .txt span{display: block;font-size: 18px; line-height: 28px;color: #333;} .sub0202 .con13 .box_wrap .box .txt span b{font-weight: 700;} .sub0202 .con13 .box_wrap .box .txt em{display: block;font-size: 18px; color: #999;margin-top: 20px;padding-bottom: 20px;} /* sub0203 */ .sub0203 .top_con{background: url(/assets/images/sub/sub0201_bg01.png)top left 180px no-repeat, url(/assets/images/sub/sub0201_bg02.png)bottom right 150px no-repeat var(--yellow);} .sub0203 .top_con .box_wrap{display: flex;align-items: center; gap:40px; background: #fff; padding: 60px; border-radius:40px;} .sub0203 .top_con .box_wrap .img{flex:1;} .sub0203 .top_con .box_wrap .txt_wrap{flex:1;} .sub0203 .top_con .box_wrap .txt_wrap span{font-size: 20px; color: #666; line-height: 30px;} .sub0203 .top_con .box_wrap .txt_wrap strong{display: block;color: #333; font-size: 24px; margin-top: 35px;} .sub0203 .border_box{padding: 60px;border:1px solid #ddd; border-radius:20px;} .sub0203 .border_box .txt01 h4.h4_tit01{margin-bottom: 15px;} .sub0203 .border_box .txt01 span{display: block;font-size: 24px; color: #666; line-height: 36px;} .sub0203 .con02{background: #f3fae6;} .sub0203 .con02 .txt_box{padding: 40px 60px;background: #fff; border-radius:20px; margin-bottom: 50px;} .sub0203 .con03 .box_con{margin: 40px 0;} .sub0203 .con03 .box_wrap{display: flex;gap:40px;} .sub0203 .con03 .box_wrap:not(:last-child){margin-bottom: 10px;} .sub0203 .con03 .box_wrap .box{display: flex; align-items: center; height: 64px;border-radius:32px; width: calc((100% - 40px) / 2);} .sub0203 .con03 .box_wrap .box p{font-size: 20px;} .sub0203 .con03 .box_wrap .left{position: relative;gap:20px;padding: 0px 20px;} .sub0203 .con03 .box_wrap .left::after{content:'';position: absolute; top: 50%;right: -50px; transform:translateY(-50%);background: url(/assets/images/sub/sub0203_arr01.png)center no-repeat; width: 60px; height: 40px; background-size: cover;opacity: var(--arr_op, 1);} .sub0203 .con03 .box_wrap .left em{display: flex;align-items: center;justify-content: center;width: 80px; height: 30px;font-size: 16px; font-weight: 700;background: #fff; color: var(--lightgreen); border-radius:15px;} .sub0203 .con03 .box_wrap .left p{color: #fff;} .sub0203 .con03 .box_wrap .right{justify-content: center; border:1px solid var(--lightgreen);} .sub0203 .con03 .box_wrap .right p{color: #333; } .sub0203 .con04 .box_wrap{display: flex;gap:100px;justify-content: center;} .sub0203 .con04 .box_wrap .box{display: flex;gap:10px;} .sub0203 .con04 .box_wrap .box .card{display: flex;align-items: center;justify-content: center;gap:20px;flex-direction: column;width: 90px; height: 120px; background: #fff7e5; border-radius:12px;} .sub0203 .con04 .box_wrap .box .card.w02{width: 190px;} .sub0203 .con04 .box_wrap .box .card.w03{width: 290px;} .sub0203 .con04 .box_wrap .box .card.co02{background: #e8f4ff;} .sub0203 .con04 .box_wrap .box .card strong{font-size: 30px;} .sub0203 .con04 .c_txt{display: block;text-align: center;font-size: 24px; color: #666; line-height: 1.5; margin: 30px 0;} .sub0203 .con05 .box_row.arr .box:not(:last-child)::after{background: url(/assets/images/sub/sub0203_arr02.png) center no-repeat;} .sub0203 .con06{background: #e8f4ff;} .sub0203 .con06 .box_con{padding-top: 100px;} .sub0203 .con07 .graph_box_st01{background: #ffeece;} .sub0203 .con07 .graph_box_st01 .graph_wrap .tit{height: 40px; border-radius:20px;} .sub0203 .con07 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(1) em{background: #fa8536;} .sub0203 .con07 .graph_box_st01 .graph_wrap01 .txt_wrap .txt:nth-child(2) em{background: #85d10d;} .sub0203 .con07 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(1) em{background: #d13191;} .sub0203 .con07 .graph_box_st01 .graph_wrap02 .txt_wrap .txt:nth-child(2) em{background: #a945fd;} .sub0203 .con07 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(1) em{background: #076fb6;} .sub0203 .con07 .graph_box_st01 .graph_wrap03 .txt_wrap .txt:nth-child(2) em{background: #5bbbc9;} .sub0203 .con09{background: #f7e9ff;} .sub0203 .con09 .box_wrap{display: flex;gap:30px;align-items: center; margin-bottom: 60px;} .sub0203 .con09 .box_wrap .img_wrap, .sub0203 .con09 .box_wrap .txt_wrap{flex:1;} .sub0203 .con09 .box_wrap ul.ul_st02 li{color: #333; background: #fff;padding: 15px 50px; border-radius:32px;} .sub0203 .con09 .box_wrap ul.ul_st02 li:not(:last-child){margin-bottom: 10px;} .sub0203 .con09 .box_wrap ul.ul_st02 li::after{left: 30px;top: 28px;} .sub0203 .con10 .box_wrap{display: flex;gap:30px;align-items: center;margin-bottom: 60px;} .sub0203 .con10 .box_wrap .box{flex:1;} .sub0203 .con10 .box_wrap .txt_wrap .txt{padding: 40px; border-radius:20px; background: #fef1e5;} .sub0203 .con10 .box_wrap .txt_wrap .txt:not(:last-child){margin-bottom: 20px;} .sub0203 .con10 .box_wrap .txt_wrap .txt p{font-size: 24px; color: #333;line-height: 36px;} .sub0203 .con10 .box_wrap .txt_wrap .txt span{display: block;font-size: 20px; color: #666; line-height: 30px; margin-top: 20px;} .sub0203 .con10 .border_box{display: flex;gap:55px;align-items: flex-end;padding-top: 40px; margin-bottom: 60px;} .sub0203 .con10 .border_box .box01{height: 100%;} .sub0203 .con10 .border_box .box01 em{display: flex;align-items: center;justify-content: center;width: 160px; height: 60px;font-size: 24px; color: #fff; border-radius:30px; margin-bottom: 60px;} .sub0203 .con10 .border_box .box01 ul li{display: flex;align-items: center;gap:10px;} .sub0203 .con10 .border_box .box01 ul li:not(:last-child){margin-bottom: 10px;} .sub0203 .con10 .border_box .box01 ul li span{display: flex;align-items: center;justify-content: center; width: 30px; height: 30px; font-size: 16px; color: #fff; background: var(--orange); border-radius:50%;} .sub0203 .con10 .border_box .box01 ul li p{font-size: 20px;color: #333;} .sub0203 .con10 .box_wrap02{margin-top: 60px;} .sub0203 .con10 .box_wrap02 .border_box{display: flex;justify-content: center;gap:50px;} .sub0203 .con10 .box_wrap02 .border_box .cer p{font-size: 20px; color: #333 ;font-weight: 700; margin-top: 20px;text-align: center;} /* sub0204 */ .sub0204 .top_con{background: url(/assets/images/sub/sub0201_bg01.png)top left 180px no-repeat, url(/assets/images/sub/sub0201_bg02.png)bottom right 150px no-repeat var(--lightgreen);} .sub0204 .top_con .img_wrap img{border-radius:40px;} .sub0204 .con .box_row{align-items: center;justify-content: center;} .sub0204 .con .box_row .box{background: transparent; border:0;} .sub0204 .con .box_row .box img{display: block;border-radius:20px;width: 100%;} .sub0204 .con .box_row .box img:not(:last-child){margin-bottom: 40px;} .sub0204 .con .sm_txt{display: block;text-align: center;font-size: 20px; color: #666;line-height: 1.5;} .sub0204 .con .img_wrap img{display: block;margin: 0 auto;} .sub0204 .con .img_wrap img:not(:last-child){margin: 0 auto 40px;} .sub0204 .con01 .box_wrap{display: flex;gap:30px;align-items: center; margin-bottom: 60px;} .sub0204 .con01 .box_wrap .img_wrap, .sub0204 .con01 .box_wrap .txt_wrap{flex:1;} .sub0204 .con01 .box_wrap ul.ul_st02 li{color: #333; background: #fff7e5;padding: 15px 50px; border-radius:32px;} .sub0204 .con01 .box_wrap ul.ul_st02 li:not(:last-child){margin-bottom: 10px;} .sub0204 .con01 .box_wrap ul.ul_st02 li::after{left: 30px;top: 28px;} .sub0204 .con01 .txt_box{padding: 40px;border:1px solid #ddd; border-radius:20px;} .sub0204 .con02{background: #e8f4ff;} .sub0204 .con02 .box_con{padding-top: 100px;} .sub0204 .con02 .tbl_flex{display: flex;justify-content: center; margin-bottom: 60px;} .sub0204 .con02 .box_row .box .txt_wrap{padding: 0;border:0;} .sub0204 .con02 .img_wrap img{display: block;margin: 0 auto;} .sub0204 .con02 .box_wrap_con{background: #fff; border-radius:40px; margin: 50px auto; padding: 60px;} .sub0204 .con02 .box_wrap{display: flex;gap:40px;} .sub0204 .con02 .box_wrap:not(:last-child){margin-bottom: 10px;} .sub0204 .con02 .box_wrap .box{display: flex; align-items: center; height: 64px;border-radius:32px; width: calc((100% - 40px) / 2);} .sub0204 .con02 .box_wrap .box p{font-size: 20px; line-height: 1.4;} .sub0204 .con02 .box_wrap .left{position: relative;gap:20px;padding: 0px 20px;} .sub0204 .con02 .box_wrap .left::after{content:'';position: absolute; top: 50%;right: -50px; transform:translateY(-50%);background: url(/assets/images/sub/sub0203_arr01.png)center no-repeat; width: 60px; height: 40px; background-size: cover;opacity: var(--arr_op, 1);} .sub0204 .con02 .box_wrap .left em{display: flex;align-items: center;justify-content: center;width: 80px; height: 30px;font-size: 16px; font-weight: 700;background: #fff; color: var(--blue); border-radius:15px;} .sub0204 .con02 .box_wrap .left p{color: #fff;width: calc(100% - 100px);} .sub0204 .con02 .box_wrap .right{justify-content: center; border:1px solid var(--blue);} .sub0204 .con02 .box_wrap .right p{color: #333; } .sub0204 .con03 .box_wrap{display: flex;} .sub0204 .con03 .box_wrap .box{width: calc(100% / 5);text-align: center;} .sub0204 .con03 .box_wrap .box:not(:last-child){border-right: 1px solid #ddd;} .sub0204 .con03 .box_wrap .box .tit{display: flex;justify-content: center;align-items: center;font-size: 24px; color: #fff; height: 60px;} .sub0204 .con03 .box_wrap .box .txt01{display: flex;align-items: center;justify-content: center; background: #f7e9ff; height: 60px;} .sub0204 .con03 .box_wrap .box .txt01 p{color: #333;} .sub0204 .con03 .box_wrap .box .txt02{display: flex;align-items: center;justify-content: center;padding: 20px;height: calc(100% - 120px);} .sub0204 .con03 .box_wrap .box .txt02 p{color: #666;} .sub0204 .con03 .box_wrap .box p{font-size: 18px;line-height: 28px;} .sub0204 .con04 .slide_box_wrap_st01 .txt_wrap .txt{min-height: 230px;} .sub0204 .con04 .slide_box_wrap_st01 .txt_wrap .txt.ha{min-height: initial;} .sub0204 .con04 .sm_txt{margin-top: 60px;} .sub0204 .con05 .box_wrap{display: flex;gap:60px;} .sub0204 .con05 .box_wrap .box{display: flex;align-items: center;justify-content: center;flex-direction: column;gap:30px;background: #fff;width: 360px; height: 360px; border-radius:50%;} .sub0204 .con05 .box_wrap .box p{font-size: 30px; line-height: 40px;text-align: center;} .sub0204 .con06 .graph_box_st01{background: #f7e9ff;} .sub0204 .con06 .graph_box_st01 .graph_box{gap:0;} .sub0204 .con06 .graph_box_st01 .graph_wrap .tit{width: 130px; height: 40px; border-radius:20px;margin: 0 auto 20px;a} .sub0204 .con06 .graph_box_st01 .txt_wrap .txt{height: 150px;} .sub0204 .con06 .graph_box_st01 .txt_wrap .txt p{padding-bottom: 20px;} .sub0204 .con06 .graph_box_st01 .txt_wrap .txt span{position: absolute;bottom: 30px;left: 50%;transform:translateX(-50%);font-size: 14px; color: #999;font-weight: 700;width: 100%;text-align: center;} .sub0204 .con06 .graph_box_st01 .graph_wrap01 .tit{background: #fa8536;} .sub0204 .con06 .graph_box_st01 .graph_wrap01 .txt_wrap .txt em{background: #fa8536;} .sub0204 .con06 .graph_box_st01 .graph_wrap02 .tit{background: #d13191;} .sub0204 .con06 .graph_box_st01 .graph_wrap02 .txt_wrap .txt em{background: #d13191;} .sub0204 .con06 .graph_box_st01 .graph_wrap03 .tit{background: #a945fd;} .sub0204 .con06 .graph_box_st01 .graph_wrap03 .txt_wrap .txt em{background: #a945fd;} .sub0204 .con06 .graph_box_st01 .graph_wrap04 .tit{background: #076fb6;} .sub0204 .con06 .graph_box_st01 .graph_wrap04 .txt_wrap .txt em{background: #076fb6;} .sub0204 .con06 .graph_box_st01 .graph_wrap05 .tit{background: #5bbbc9;} .sub0204 .con06 .graph_box_st01 .graph_wrap05 .txt_wrap .txt em{background: #5bbbc9;} .sub0204 .con08{background: #f7e9ff;} .sub0204 .con09{background: #f7e9ff;} .sub0204 .con10 .box_con:not(:last-child){padding-bottom: 100px;} .sub0204 .con10 .box_row .box .txt_wrap{padding: 0;border:0;} .sub0204 .con10 .img_wrap img{display: block;margin: 0 auto;} .sub0204 .con11{background: #f7e9ff;} .sub0204 .con11 .box_wrap .box{display: flex;align-items: center;gap:80px;padding: 30px 80px;background: #fff; border-radius:20px;} .sub0204 .con11 .box_wrap .box .cer_wrap, .sub0204 .con11 .box_wrap .box .txt_wrap{flex:1;} .sub0204 .con11 .box_wrap .box .cer_wrap{display: flex;gap:30px;} .sub0204 .con11 .box_wrap .box .cer_wrap img{border:1px solid #ddd;} .sub0204 .con11 .box_wrap .box .cer_wrap p{font-size: 20px; color: #333; font-weight: 700 ;text-align: center; margin-top: 15px;} .sub0204 .con12{background: #e8f4ff;} .sub0204 .con12 .box_con:not(:last-child){padding-bottom: 100px;} .sub0204 .con12 .img_wrap img{display: block;margin: 0 auto;} /* sub0401 */ .sub0401_wrap{line-height: 1;} .sub0401_wrap .list_wrap{display: flex;flex-wrap:wrap;gap:40px 20px;} .sub0401_wrap .list_wrap .list{width: calc((100% - 40px) / 3);} /* .sub0401_wrap .list_wrap .list .tit{width: 100%; padding: 15px 20px; border-radius:12px;} .sub0401_wrap .list_wrap .list .tit p{font-size: 18px; font-weight: 700;color: #fff;line-height: 1.6;text-align: center;} */ .sub0401_wrap .list_wrap .list .txt_wrap{padding: 20px;background: #fff; border:1px solid #ddd; border-radius:12px;min-height: calc(100% - 130px);} .sub0401_wrap .list_wrap .list .img_wrap{position:relative; width:100%; padding-bottom:62.04%; background: #f5f5f5;} .sub0401_wrap .list_wrap .list .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%; } .sub0401_wrap .list_wrap .list .txt{margin: 20px 0;} .sub0401_wrap .list_wrap .list .txt strong{display: block;font-size: 18px;color: #333;} .sub0401_wrap .list_wrap .list .txt p{height: 50px;font-size: 16px; color: var(--blue); line-height: 26px; font-weight: 700; margin-top: 15px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;} .sub0401_wrap .list_wrap .list ul li{position: relative;padding-left: 15px;font-size: 16px; color: #666; line-height: 26px;} .sub0401_wrap .list_wrap .list ul li::after{content:'';position: absolute;top: 12px; left: 0;width: 5px; height: 5px; background: var(--blue); border-radius:50%;} .sub0401_wrap .list_wrap .list .price_wrap{margin-top: 20px;} .sub0401_wrap .list_wrap .list .price_wrap del{display: block;font-size: 16px;} .sub0401_wrap .list_wrap .list .price_wrap p{font-size: 24px;color: #222;font-weight: 700;margin-top: 6px;} /* sub0401_view */ .sub0401_view_wrap{line-height: 1;} .sub0401_view_wrap .con01 .box_wrap{display: flex;gap:60px;} .sub0401_view_wrap .con01 .box_wrap .img_box{width: calc((100% - 60px) / 2);} .sub0401_view_wrap .con01 .box_wrap .img_box .tit{display: flex;align-items: center;justify-content: center; width: 100%; height: 70px; background: var(--blue); border-radius:12px;} .sub0401_view_wrap .con01 .box_wrap .img_box .tit p{font-size: 18px; color: #fff; font-weight: 700 ;} .sub0401_view_wrap .con01 .box_wrap .img_wrap{position:relative; width:100%; padding-bottom:62.04%; background: #fff; border-radius:12px; border:1px solid #ddd;overflow: hidden;} .sub0401_view_wrap .con01 .box_wrap .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .sub0401_view_wrap .con01 .box_wrap .img_box .btn_wrap_st01{margin-top: 20px;} .sub0401_view_wrap .con01 .box_wrap .img_box .btn_wrap_st01 a{width: calc((100% - 10px) / 2);} .sub0401_view_wrap .con01 .box_wrap .txt_box{width: calc((100% - 60px) / 2);} .sub0401_view_wrap .con01 .box_wrap .txt_box .tit{padding-bottom: 20px;border-bottom: 1px solid #ddd;} .sub0401_view_wrap .con01 .box_wrap .txt_box .tit p{font-size: 30px; color: #333; font-weight: 700;line-height: 1.6;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box{padding: 20px 10px;border-bottom: 1px solid #ddd;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li{position: relative;display: flex;padding-left: 18px;font-size: 18px; line-height: 1.6;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li:not(:last-child){margin-bottom: 10px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li::after{content:'';position: absolute;top: 12px; left: 0;width: 5px; height: 5px; background: var(--blue); border-radius:50%;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li strong{display: block;width: 110px;color: #222;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li .txt{color: #666;width: calc(100% - 110px);} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li del, .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li span{font-weight: 700;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li em.none{padding-left: 28px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .ul_box ul li select{height: 35px;border:1px solid #ddd; border-radius:6px;font-size: 16px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap{margin-top: 20px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .select{margin-bottom: 20px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap select:not(:last-child){margin-bottom: 10px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap select{width: 100%; border:1px solid #ddd ; height: 40px;padding: 0px 20px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li {background: #f5f5f5; padding: 20px 30px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li:not(:last-child) {margin-bottom: 10px;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #ddd;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .top p {font-size: 16px; color: #666; width: calc(100% - 50px); line-height: 1.4;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .top .del_btn {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #999; font-size: 14px; color: #222; font-weight: 700; border-radius: 50%; cursor: pointer;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .bot {display: flex; align-items: center; justify-content: space-between;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .bot .qty {display: flex;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .bot .qty .plus {display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid #ddd; background: #fff; font-size: 24px; color: #666;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .bot .qty .minus {display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid #ddd; background: #fff; font-size: 24px; color: #666;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .bot .qty input {width: 60px; height: 35px; border: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; font-size: 16px; color: #666; text-align: center;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .bot .qty input:focus {outline: 0;} .sub0401_view_wrap .con01 .box_wrap .txt_box .select_wrap .opt_wrap ul li .bot p {font-size: 16px; color: #666;} .sub0401_view_wrap .con01 .box_wrap .txt_box .price_wrap{display: flex;align-items: center;justify-content: space-between;padding: 30px 0;} .sub0401_view_wrap .con01 .box_wrap .txt_box .price_wrap strong{font-size: 18px;color: #222; font-weight: 700;} .sub0401_view_wrap .con01 .box_wrap .txt_box .price_wrap b{font-size: 30px;color: #222;} .sub0401_view_wrap .con01 .box_wrap .txt_box .btn_wrap_st01{margin-top: 0;} .sub0401_view_wrap .con01 .box_wrap .txt_box .btn_wrap_st01 a{width: calc(100% - 160px);} .sub0401_view_wrap .con01 .box_wrap .txt_box a.cart_btn, .sub0401_view_wrap .con01 .box_wrap .txt_box a.wish_btn{width: 70px;border:1px solid #ddd;} .sub0401_view_wrap .con02{margin-top: 100px;} .sub0401_view_wrap .con02 .tab-menu-wrap{display: flex; border:1px solid #ddd;margin-bottom: 60px;} .sub0401_view_wrap .con02 .tab-menu-wrap a{flex:1;display: flex;align-items: center;justify-content: center; height: 60px;font-size: 16px; color: #999;} .sub0401_view_wrap .con02 .tab-menu-wrap a.on{background: #333; color: #fff;font-weight: 700;} .sub0401_view_wrap .con02 .tab-con{font-size: 18px; color: #666; line-height: 1.6;} .sub0401_view_wrap .con02 .tab-con table.tbl03 td a{display: block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pop_st01{display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100vh;line-height: 1; background: rgba(0,0,0,.5);} .pop_st01 .pop_wrap{position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%);width: 1200px;max-width: 94.8%;} .pop_st01 .img_wrap{position:relative; width:100%; padding-bottom:56.25%; background: #fff;} .pop_st01 .img_wrap img, .pop_st01 .img_wrap iframe, .pop_st01 .img_wrap video{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .pop_st01 .img_wrap.w02 img, .pop_st01 .img_wrap.w02 iframe, .pop_st01 .img_wrap.w02 video{width: auto;height: auto; max-width:100% ; max-height:100vh; object-fit:initial;} /*sub0504 - 자료실 */ .sub0504_wrap{line-height: 1;} .sub0504_wrap .depth03_wrap{justify-content: center;gap:80px;} .sub0504_wrap .list_wrap .list{display: flex;align-items: center;justify-content: space-between;padding: 20px 30px;border:1px solid #ddd; border-radius:12px;background: rgb(232, 244, 255, .3);transition:.3s;} .sub0504_wrap .list_wrap .list:not(:last-child){ margin-bottom: 10px;} .sub0504_wrap .list_wrap .list:hover{background: rgb(232, 244, 255, 1);border: 1px solid var(--blue);} .sub0504_wrap .list_wrap .list .left{display: flex;align-items: center;gap:30px;width: calc(100% - 250px); } .sub0504_wrap .list_wrap .list .left .txt{width: calc(100% - 80px);} .sub0504_wrap .list_wrap .list .left .txt p{font-size: 20px; color: #333 ;font-weight: 700;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .sub0504_wrap .list_wrap .list .right{display: flex;align-items: center;gap:10px;} .sub0504_wrap .list_wrap .list .right .tag{display: flex;align-items: center;justify-content: center;width: 90px; height: 34px;font-size: 14px; border-radius:6px;color: #fff;} .sub0504_wrap .list_wrap .list .right .tag01{background: var(--orange);} .sub0504_wrap .list_wrap .list .right .tag02{background: #85d10d;} .sub0504_wrap .list_wrap .list .right .tag03{background: var(--lightblue);} .sub0504_wrap .list_wrap .list .right a.dw_btn{display: flex;align-items: center;justify-content: center;gap:10px; width: 120px;height: 34px;font-size: 14px;background: #fff; border:1px solid var(--blue); border-radius:6px;color: var(--blue);} /* sub0701 - 이지북키 */ .sub0701_wrap{line-height: 1;} .sub0701_wrap .con:not(:last-child){margin-bottom: 80px;} .sub0701_wrap .con .tit_wrap{display: flex;align-items: center;justify-content: space-between; margin-bottom: 30px;} .sub0701_wrap .con .tit_wrap p{font-size: 30px; color: #222; font-weight: 700;} .sub0701_wrap .con .tit_wrap a{display: flex;align-items: center;justify-content: center;gap:10px;font-size: 18px; color: #999;} .sub0701_wrap .con .tit_wrap a img{display: block;} .sub0701_wrap .con01 .id_wrap{padding: 45px 60px; border:1px solid var(--orange); border-radius:12px; background: url(/assets/images/sub/book_bg01.png)bottom right no-repeat #fef3e5; line-height: 1.5;} .sub0701_wrap .con01 .id_wrap p{font-size: 30px; color: #222; font-weight: 700;} .sub0701_wrap .con01 .id_wrap span{display: block;font-size: 24px; color: #222; margin-top: 15px;} .sub0701_wrap .con01 .id_wrap strong{display: block;font-size: 18px;color: #222;margin-top: 20px;} .sub0701_wrap .con01 .box_wrap{display: flex; gap:30px; margin-top: 30px;} .sub0701_wrap .con01 .box_wrap .box{display: flex;align-items: center;gap:30px;flex:1;padding:20px 40px; border-radius:12px; box-shadow:0px 0px 8px rgba(0,0,0,.1);} .sub0701_wrap .con01 .box_wrap .box .txt em{display: block;font-size: 16px;font-weight: 700; margin-bottom: 15px;} .sub0701_wrap .con01 .box_wrap .box .txt p{font-size: 24px; color: #222; font-weight: 700;} .sub0701_wrap .con01 .box_wrap .box .txt p b{font-size: 16px;font-weight: 400;} .sub0701_wrap .con01 .box_wrap .box .txt span{display: block;font-size: 16px; color: #999; margin-top: 10px;} .sub0701_wrap .con02 .cate_wrap{display: flex;flex-wrap:wrap;gap:10px; margin-bottom: 20px;} .sub0701_wrap .con02 .cate_wrap a{display: flex;align-items: center;justify-content: center;width: 120px; height: 40px; border:1px solid #333;font-size: 18px; color: #333; border-radius:20px;} .sub0701_wrap .con02 .cate_wrap a.on{background: #333; color: #fff;} .sub0701_wrap .con02 .box_wrap{display: flex;gap:20px;flex-wrap:wrap;} .sub0701_wrap .con02 .box_wrap .box{width:calc((100% - 60px) / 4); box-shadow:0px 0px 8px rgba(0,0,0,.1); border-radius:20px; overflow: hidden;} .sub0701_wrap .con02 .box_wrap .box .img_box{position: relative;} .sub0701_wrap .con02 .box_wrap .box .img_box em.tag{position: absolute;top: 20px; right: 20px;display: flex;align-items: center;justify-content: center; width: 90px; height: 28px; font-size: 13px;background: #333; color: #fff; border-radius:14px;} .sub0701_wrap .con02 .box_wrap .box .img_wrap{position:relative; width:100%; padding-bottom:63.15%; border-radius:20px; overflow: hidden;} .sub0701_wrap .con02 .box_wrap .box .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap{padding: 20px;background: #fff;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap p{font-size: 18px; color: #333; font-weight: 700; line-height: 1.2;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap .bot{display: flex;align-items: center;justify-content: space-between;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap .bot strong{display: flex;align-items: center;justify-content: center; height: 28px; padding: 0px 10px;font-size: 13px; border-radius:14px;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap .bot strong.co01{color: var(--purple); background: #f9efff;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap .bot strong.co02{color: #f48500;background: #fef6ed;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap .bot strong.co03{color: #d13191;background: #fcf0f7;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap .bot strong.co04{color: #ffb502;background: #fffaed;} .sub0701_wrap .con02 .box_wrap .box .txt_wrap .bot span{font-size: 14px; color: #999;} /* 교육영상 설정하기 : 게시판(List) 형태 */ .sub0701_wrap .con_set .list_wrap{border-top: 2px solid #333;} .sub0701_wrap .con_set .list_head{display: flex;align-items: center;height: 56px;background: #f5f5f5;border-bottom: 1px solid #ddd;} .sub0701_wrap .con_set .list_head span{font-size: 16px; color: #333; font-weight: 700;text-align: center;} .sub0701_wrap .con_set .list li{display: flex;align-items: center;padding: 15px 0;border-bottom: 1px solid #eee;} .sub0701_wrap .con_set .col_img{flex-shrink: 0;width: 200px;padding: 0 20px;} .sub0701_wrap .con_set .col_info{flex: 1;min-width: 0;padding: 0 20px;} .sub0701_wrap .con_set .col_set{flex-shrink: 0;display: flex;align-items: center;justify-content: center;gap: 24px;width: 240px;} .sub0701_wrap .con_set .list_head .col_info{text-align: left;} .sub0701_wrap .con_set .list .img_wrap{position: relative;width: 100%;padding-bottom: 63.15%;border-radius: 10px;overflow: hidden;} .sub0701_wrap .con_set .list .img_wrap img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;} .sub0701_wrap .con_set .list em.tag{display: inline-flex;align-items: center;justify-content: center;min-width: 90px;height: 28px;padding: 0 12px;font-size: 13px;background: #333;color: #fff;border-radius: 14px;} .sub0701_wrap .con_set .list .tit{margin: 10px 0;font-size: 18px; color: #333; font-weight: 700;line-height: 1.4;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .sub0701_wrap .con_set .list .meta{display: flex;align-items: center;gap: 10px;} .sub0701_wrap .con_set .list .meta strong{display: flex;align-items: center;height: 28px;padding: 0 10px;font-size: 13px;border-radius: 14px;} .sub0701_wrap .con_set .list .meta strong.co01{color: var(--purple); background: #f9efff;} .sub0701_wrap .con_set .list .meta strong.co02{color: #f48500;background: #fef6ed;} .sub0701_wrap .con_set .list .meta strong.co03{color: #d13191;background: #fcf0f7;} .sub0701_wrap .con_set .list .meta strong.co04{color: #ffb502;background: #fffaed;} .sub0701_wrap .con_set .list .meta span{font-size: 14px; color: #999;} .sub0701_wrap .con_set .col_set label{display: flex;align-items: center;gap: 6px;font-size: 16px; color: #333;cursor: pointer;} .sub0701_wrap .con_set .col_set input[type="radio"]{width: 18px;height: 18px;margin: 0;accent-color: #333;cursor: pointer;} .sub0701_wrap .con_set .col_view{flex-shrink: 0;display: flex;justify-content: center;width: 140px;} .sub0701_wrap .con_set .list .btn_view{display: flex;align-items: center;justify-content: center;width: 90px;height: 34px;font-size: 14px; color: #333;border: 1px solid #333;border-radius: 17px;transition: all .2s;} .sub0701_wrap .con_set .list .btn_view:hover{background: #333;color: #fff;} /* 원생현황 (설정 페이지) : 8개 항목 + 승인여부 셀렉트 */ .sub0701_wrap .con_stu .tbl_box .c01{width: 6%;} .sub0701_wrap .con_stu .tbl_box .c02{width: 11%;} .sub0701_wrap .con_stu .tbl_box .c03{width: 11%;} .sub0701_wrap .con_stu .tbl_box .c04{width: 14%;} .sub0701_wrap .con_stu .tbl_box .c05{width: 12%;} .sub0701_wrap .con_stu .tbl_box .c06{width: 10%;} .sub0701_wrap .con_stu .tbl_box .c07{width: 12%;} .sub0701_wrap .con_stu .tbl_box .c08{width: 24%;} .sub0701_wrap .con_stu .tbl_box table td{white-space: nowrap;} .sub0701_wrap .con_stu .tbl_box .appr{display: flex;align-items: center;justify-content: center;gap: 6px;} .sub0701_wrap .con_stu .tbl_box .appr select{min-width: 0;width: 100px;height: 32px;padding: 0 28px 0 10px;font-size: 14px; color: #333;border: 1px solid #ddd;border-radius: 6px;background-color: #fff;} .sub0701_wrap .con_stu .tbl_box .btn_ok{flex-shrink: 0;height: 32px;padding: 0 12px;font-size: 13px; color: #fff;background: #333;border: 0;border-radius: 6px;cursor: pointer;} /* 반별 교육영상 관리 */ .sub0701_wrap .con_cls .tbl_box .c01{width: 10%;} .sub0701_wrap .con_cls .tbl_box .c02{width: 25%;} .sub0701_wrap .con_cls .tbl_box .c03{width: 20%;} .sub0701_wrap .con_cls .tbl_box .c04{width: 20%;} .sub0701_wrap .con_cls .tbl_box .c05{width: 25%;} .sub0701_wrap .con_cls .tbl_box table td{white-space: nowrap;} .sub0701_wrap .con_cls .tbl_box .btn_go{display: inline-flex;align-items: center;justify-content: center;width: 90px;height: 32px;font-size: 14px; color: #333;border: 1px solid #333;border-radius: 16px;transition: all .2s;} .sub0701_wrap .con_cls .tbl_box .btn_go:hover{background: #333;color: #fff;} /* 전체원생관리 */ .sub0701_wrap .con_all .tbl_box .c01{width: 7%;} .sub0701_wrap .con_all .tbl_box .c02{width: 14%;} .sub0701_wrap .con_all .tbl_box .c03{width: 14%;} .sub0701_wrap .con_all .tbl_box .c04{width: 17%;} .sub0701_wrap .con_all .tbl_box .c05{width: 17%;} .sub0701_wrap .con_all .tbl_box .c06{width: 16%;} .sub0701_wrap .con_all .tbl_box .c07{width: 15%;} .sub0701_wrap .con_all .tbl_box table td{white-space: nowrap;} .sub0701_wrap .con_all .tbl_box .cnt{display: flex;align-items: center;justify-content: center;gap: 8px;} .sub0701_wrap .con_all .tbl_box .btn_sm{display: inline-flex;align-items: center;justify-content: center;height: 24px;padding: 0 8px;font-size: 12px; color: #333;border: 1px solid #333;border-radius: 12px;transition: all .2s;} .sub0701_wrap .con_all .tbl_box .btn_sm:hover{background: #333;color: #fff;} .sub0701_wrap .con03{display: flex;gap:60px;} .sub0701_wrap .con03 .box{width: calc((100% - 60px) / 2);} .sub0701_wrap .con03 .list_wrap{} .sub0701_wrap .con03 .list_wrap .list:not(:last-child){margin-bottom: 10px;} .sub0701_wrap .con03 .list_wrap .list a{display: flex;padding: 24px 20px; background: #fff; border-radius:20px;box-shadow:0px 0px 8px rgba(0,0,0,.1); } .sub0701_wrap .con03 .list_wrap .list p{font-size: 18px; color: #333; font-weight: 700;width: calc(100% - 100px);white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub0701_wrap .con03 .list_wrap .list span{display: block;width: 100px;font-size: 18px; color: #999;text-align: right;} .sub0701_wrap .con04 .box_wrap{display: flex;gap:30px;} .sub0701_wrap .con04 .box_wrap .tbl_box{flex:790;padding: 20px; background: #fff; border-radius:20px; box-shadow:0px 0px 8px rgba(0,0,0,.1);} .sub0701_wrap .con04 .box_wrap .tbl_box table{table-layout: fixed;width: 100%;} .sub0701_wrap .con04 .box_wrap .tbl_box table th p{padding: 15px 10px;font-size: 16px; color: #333; font-weight: 700;text-align: center; background: #f5f5f5;d} .sub0701_wrap .con04 .box_wrap .tbl_box table th:first-child p{border-radius:12px 0 0 12px;} .sub0701_wrap .con04 .box_wrap .tbl_box table th:last-child p{border-radius:0 12px 12px 0;} .sub0701_wrap .con04 .box_wrap .tbl_box table td{padding: 9px 10px;font-size: 16px; color: #666;text-align: center;} .sub0701_wrap .con04 .box_wrap .tbl_box table td img{vertical-align: bottom;} .sub0701_wrap .con04 .box_wrap .btn_box{flex:380;min-width: 0;} .sub0701_wrap .con04 .box_wrap .btn_box .btn{display: flex;align-items: center;justify-content: space-between;padding: 30px 30px 40px; border-radius:20px;} .sub0701_wrap .con04 .box_wrap .btn_box .btn01{background: var(--blue);margin-bottom: 10px;} .sub0701_wrap .con04 .box_wrap .btn_box .btn02{background: var(--purple);} .sub0701_wrap .con04 .box_wrap .btn_box .btn .txt{width: calc(100% - 100px);min-width: 0;} .sub0701_wrap .con04 .box_wrap .btn_box .btn .txt p{font-size: 24px; color: #fff;font-weight: 700;line-height: 1.4;word-break: keep-all;white-space: normal; overflow: visible; text-overflow: clip;} .sub0701_wrap .con04 .box_wrap .btn_box .btn .txt span{display: block;font-size: 16px; color: #fff; margin-top: 10px;line-height: 1.4;word-break: keep-all;white-space: normal; overflow: visible; text-overflow: clip;} .sub0701_wrap .con04 .box_wrap .btn_box .btn a{display: flex;align-items: center;justify-content: center; width: 90px; height: 28px; background: rgba(255,255,255,.5);color: #fff; border-radius:14px;} .sub0701_wrap.sub0701_2 .con01 .id_wrap{border:1px solid #85d10d; background: url(/assets/images/sub/book_bg02.png)bottom right no-repeat #f3fae6; } .sub0701_wrap.sub0701_2 .con01 .id_wrap strong b{color: #85d10d;} .sub0701_wrap.sub0701_3 .con01 .id_wrap{border:1px solid #af23ff; background: url(/assets/images/sub/book_bg03.png)bottom right no-repeat #f7e9ff; } .sub0701_wrap.sub0701_3 .con01 .id_wrap strong b{color: #af23ff;} /* sub0702 */ .sub0702_wrap{padding: 0;} .sub0702_wrap .con{padding: 100px 0;} .sub0702_wrap .con .box_wrap01{padding: 60px; border:1px solid #ddd; border-radius:20px; background: #fff;} .sub0702_wrap .con .box_wrap01.br_none{border:0;} .sub0702_wrap .con .alert{padding: 20px;border-radius:12px;} .sub0702_wrap .con .alert p{position: relative;padding-left: 30px;font-size: 18px; color: #666; line-height: 28px;} .sub0702_wrap .con .alert p::after{content:'';position: absolute;top: 4px; left: 0; background: url(/assets/images/sub/sub0901_icon01.png)center no-repeat; width: 19px; height: 20px; background-size: cover;} .sub0702_wrap .con .alert.lightblue{background: #e9f9fb;} .sub0702_wrap .con .alert.purple{background: #f7e9ff;} .sub0702_wrap .con .alert.orange{background: #fef1e5;} .sub0702_wrap .con .alert.purple p::after{background: url(/assets/images/sub/sub0901_icon02.png)center no-repeat; width: 19px; height: 20px; background-size: cover;} .sub0702_wrap .con .alert.orange p::after{background: url(/assets/images/sub/sub0901_icon05.png)center no-repeat; width: 19px; height: 20px; background-size: cover;} .sub0702_wrap .con01{background: #fef1e5;} .sub0702_wrap .con01 .box_wrap01{display: flex;align-items: center;gap:60px; } .sub0702_wrap .con01 .box_wrap01 .box01{width: 665px;} .sub0702_wrap .con01 .box_wrap01 .box01 .top{position: relative;display: flex;justify-content: center;align-items: center; gap:40px;padding: 20px 40px; background: #e8f4ff; border-radius:12px;color: #333;width: fit-content;margin: 0 auto;} .sub0702_wrap .con01 .box_wrap01 .box01 .top::after{content:'';position: absolute;bottom: -40px;left: 50%;transform:translateX(-50%);width: 1px; height: 30px; background: #ddd;} .sub0702_wrap .con01 .box_wrap01 .box01 .top strong{font-size: 36px; } .sub0702_wrap .con01 .box_wrap01 .box01 .bot{position: relative;display: flex;justify-content: center;gap:40px; margin-top: 80px;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot::after{content:'';position: absolute;top: -40px;left: 45%;transform:translateX(-50%);width: 490px; height: 1px; background: #ddd;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .img_wrap{position: relative;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .img_wrap::after{content:'';position: absolute;top: -40px;left: 50%;transform:translateX(-50%);width: 1px; height: 30px; background: #ddd;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .img_wrap .img{position: relative;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .img_wrap:not(:last-child) .img::after{content:'';position: absolute;top: 50%;right: -30px; transform:translateY(-50%);background: url(/assets/images/sub/sub0901_arr01.png)center no-repeat; width: 15px; height: 42px; background-size: cover;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .img_wrap .img .gif{position: absolute;top: 8px; left: 30px;width: 180px;height: 112px;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .video_box{width: 241px;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .video_wrap{position:relative; width:100%; padding-bottom:56.25%;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot .video_wrap iframe{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .sub0702_wrap .con01 .box_wrap01 .box01 .bot p{font-size: 18px; color: #333; font-weight: 700;text-align: center; margin-top: 20px;} .sub0702_wrap .con01 .box_wrap01 .box02{width: calc(100% - 725px);} .sub0702_wrap .con01 .box_wrap01 .box02 .top{border:1px solid var(--lightblue);border-radius:15px;} .sub0702_wrap .con01 .box_wrap01 .box02 .top .tit{display: flex; align-items: center;justify-content: center;height: 64px;border-radius:12px;} .sub0702_wrap .con01 .box_wrap01 .box02 .top .tit p{font-size: 24px;color: #fff;} .sub0702_wrap .con01 .box_wrap01 .box02 .top .txt{padding: 30px;text-align: center;} .sub0702_wrap .con01 .box_wrap01 .box02 .top .txt p{font-size: 20px; color: #666;} .sub0702_wrap .con01 .box_wrap01 .box02 .top .txt em{display: block;font-size: 36px;margin: 10px 0;} .sub0702_wrap .con01 .box_wrap01 .box02 .bot{margin-top: 10px;} .sub0702_wrap .con02 .img_flex{display: flex;gap:45px;align-items: center;margin-bottom: 40px;} .sub0702_wrap .con02 .img_flex .img{position: relative;} .sub0702_wrap .con02 .img_flex .img img{display: block;width: 520px;} .sub0702_wrap .con02 .img_flex .img:not(:last-child)::after{content:'';position: absolute;top: 50%;right: -33px; transform:translateY(-50%); background: url(/assets/images/sub/sub0901_arr02.png)center no-repeat; width: 15px;height: 42px; background-size: cover;} .sub0702_wrap .con02 .img_flex .txt{position: absolute;top: 10px;left: 10px;display: flex;align-items: center;justify-content: center;width: 300px; height: 64px; background: rgba(41,197,220,.8); border-radius:20px;} .sub0702_wrap .con02 .img_flex .txt p{font-size: 18px; color: #fff;} .sub0702_wrap .con03 .flex_box{display: flex;gap:10px;margin-bottom: 40px;} .sub0702_wrap .con03 .flex_box .left{display: flex;gap:10px;} .sub0702_wrap .con03 .flex_box .left .box{position: relative; flex:1;} .sub0702_wrap .con03 .flex_box .left .box .txt{position: absolute; top: 10px; left: 10px; display: flex;align-items: center;justify-content: center; background: rgba(244,121,0,.8); border-radius:20px; width: calc(100% - 20px); height: 64px;} .sub0702_wrap .con03 .flex_box .left .box .txt p{font-size: 18px; line-height: 28px;color: #fff;} .sub0702_wrap .con03 .flex_box .right{width: 208px;} .sub0702_wrap .con03 .flex_box .right .box{display: flex;align-items: center;justify-content: center;gap:13px;height: 145px;padding: 20px 0;background: #f5f5f5; border-radius:20px;} .sub0702_wrap .con03 .flex_box .right .box:not(:last-child){margin-bottom: 10px;} .sub0702_wrap .con03 .flex_box .right .box p{font-size: 18px; line-height: 28px;} .sub0702_wrap .con04 .box_wrap01{display: flex;gap:30px;} .sub0702_wrap .con04 .box_wrap01 .box{flex:1;border-radius:15px;} .sub0702_wrap .con04 .box_wrap01 .box .tit{display: flex;align-items: center;justify-content: center;padding: 15px;border-radius:12px;} .sub0702_wrap .con04 .box_wrap01 .box .tit p{font-size: 24px; line-height: 36px;color: #fff;} .sub0702_wrap .con04 .box_wrap01 .box .txt_wrap{padding: 30px 20px;} .sub0702_wrap .con04 .box_wrap01 .box .txt_wrap .img{margin-bottom: 20px;} .sub0702_wrap .con04 .box_wrap01 .box .txt_wrap .img img{display: block; margin: 0 auto;} .sub0702_wrap .con04 .box_wrap01 .box .txt_wrap .txt p{font-size: 20px; color: #666; line-height: 30px;text-align: center; } .sub0702_wrap .con04 .box_wrap01 .box01{border:1px solid var(--lightgreen);} .sub0702_wrap .con04 .box_wrap01 .box02{border:1px solid var(--orange);} .sub0702_wrap .con04 .box_wrap01 .box03{margin-bottom: 10px;border:1px solid var(--purple);} .sub0702_wrap .con05{background: #f3fae6;} .sub0702_wrap .con05 .box_wrap01{display: flex;gap:60px;align-items: center;} .sub0702_wrap .con05 .box_wrap01 .left{width: 415px;} .sub0702_wrap .con05 .box_wrap01 .left .img_wrap{position:relative; width:100%; padding-bottom:56.25%;} .sub0702_wrap .con05 .box_wrap01 .left .img_wrap iframe{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap{margin-top: 20px;} .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap .txt{display: flex;gap:20px;align-items: center;} .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap .txt:not(:last-child){margin-bottom: 5px;} .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap .txt em{display: flex;align-items: center;gap:10px;justify-content: center;width: 64px; height: 40px; font-size: 18px; color: #fff; font-weight: 700; border-radius:8px;} .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap .txt .p_wrap{position: relative;display: flex;align-items: center;height: 40px;padding: 0px 10px; box-shadow:-2px 0px 12px rgba(0,0,0,.2); border-radius:8px;width: calc(100% - 84px);} .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap .txt .p_wrap::after{content:'';position: absolute;top: 50%; left: -10px;transform:translateY(-50%); background: url(/assets/images/sub/sub0901_arr03.png)center no-repeat; width: 10px; height: 12px; background-size: cover;} .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap .txt:nth-child(2n) .p_wrap::after{left: initial; right: -10px;transform:translateY(-50%) rotate(180deg); box-shadow:0px 0px 0px rgba(0,0,0,.2); } .sub0702_wrap .con05 .box_wrap01 .left .txt_wrap .txt .p_wrap p{font-size: 15px; color: #666; line-height: 1.4;} .sub0702_wrap .con05 .box_wrap01 .right{width: calc(100% - 475px);} .sub0702_wrap .con05 .box_wrap01 .right .icon_flex{display: flex; gap:40px;margin-bottom: 50px;} .sub0702_wrap .con05 .box_wrap01 .right .icon_flex .icon{position: relative;display: flex;align-items: center;justify-content: center;width: 125px; height: 125px; background: #f5f5f5; border-radius:50%;} .sub0702_wrap .con05 .box_wrap01 .right .icon_flex .box:not(:last-child) .icon::after{content:'';position: absolute;top: 50%; right: -28px; transform:translateY(-50%);background: url(/assets/images/sub/sub0901_arr01.png)center no-repeat; width: 15px; height: 42px; background-size: cover;} .sub0702_wrap .con05 .box_wrap01 .right .icon_flex p{font-size: 20px; font-weight: 500; text-align: center; margin-top: 30px;} .sub0702_wrap .con06 .box_wrap{display: flex;flex-wrap:wrap;gap:20px 40px;} .sub0702_wrap .con06 .box_wrap .box{position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;width: calc((100% - 120px) / 4); padding: 30px 20px; border:1px solid #ddd; border-radius:20px;} .sub0702_wrap .con06 .box_wrap .box::after{content:'';position: absolute;top: 50%; right: -29px; transform:translateY(-50%); background: url(/assets/images/sub/sub0901_arr01.png)center no-repeat; width: 15px; height: 42px; background-size: cover;} .sub0702_wrap .con06 .box_wrap .box:nth-child(4n)::after{display: none;} .sub0702_wrap .con06 .box_wrap .box em{display: flex;align-items: center;justify-content: center;width: 40px; height: 40px;font-family: 'YeogiOttaeJalnan'; background: var(--lightgreen);color: #fff;font-size: 16px; border-radius:50%;} /* [2026.11.04 수정] 06 이지북키가 만드는 구조 - 숫자 밑 이미지 영역 확대 - 기존: height: 115px (가로는 이미지 크기만큼만 차지) - 변경: 가로 100%(박스 안쪽 폭 전체) / 세로 180px 로 영역 확대 + 위아래 여백 15px - 변경: 이미지 크기와 상관없이 영역 안에 꽉 차게(비율 유지) 들어가도록 img 규칙 추가 */ .sub0702_wrap .con06 .box_wrap .box .icon{display: flex;align-items: center;justify-content: center;width: 100%;height: 150px;margin: 15px 0;} .sub0702_wrap .con06 .box_wrap .box .icon img{display: block;width: 100%;height: 100%;object-fit: contain;} /* [2026.11.04 추가] 작은 이미지는 확대, 큰 이미지는 축소되어 영역 안에 비율 유지하며 맞춰짐 */ .sub0702_wrap .con06 .box_wrap .box .txt p{font-size: 20px; line-height: 30px; font-weight: 500;text-align: center;} .sub0702_wrap .con07{padding-top: 0;} .sub0702_wrap .con07 .box_wrap01{display: flex;align-items: center; background: #f5f5f5;} .sub0702_wrap .con07 .box_wrap01 .img{width: 50%;} .sub0702_wrap .con07 .box_wrap01 .txt{width: 50%;padding-left: 60px;} .sub0702_wrap .con07 .box_wrap01 .txt p{font-size: 30px; line-height: 40px;} .sub0702_wrap .con07 .box_wrap01 .txt span{display: block;font-size: 24px; line-height: 36px; margin-top: 20px;} /* sub0802 */ .sub0802 .list_wrap .list .tit_wrap .left{width: calc(100% - 40px);} .sub0802 .list_wrap .list .tit_wrap .left p{width: 100%;} .sub0802 .list_wrap .list .tit_wrap .right{width: 40px;} /* sub0803 */ .sub0803_wrap{line-height: 1;} .sub0803_wrap table.tbl02 col:nth-child(1){width: 70px;} .sub0803_wrap table.tbl02 col:nth-child(2){width: calc(100% - 420px);} .sub0803_wrap table.tbl02 col:nth-child(3){width: 130px;} .sub0803_wrap table.tbl02 col:nth-child(4){width: 80px;} .sub0803_wrap table.tbl02 col:nth-child(5){width: 140px;} .sub0803_wrap table.tbl02 th{color: #999;} .sub0803_wrap table.tbl02 td{color: #999;} .sub0803_wrap table.tbl02 td img{vertical-align: baseline;} .sub0803_wrap table.tbl02 td a{display: flex;text-align: left;align-items: center;color: #333;font-weight: 700;width: 100%;} .sub0803_wrap table.tbl02 td a p{max-width: calc(100% - 40px);white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub0803_wrap table.tbl02 td img.secret{margin-left: 10px;} .sub0803_wrap table.tbl02 td .reply{width: 65px;} .admin_btn{display: flex;justify-content: flex-end;gap:10px;margin-top: 0;} .admin_btn a, .admin_btn button{margin-left: 0;margin-right: 0;display: flex;align-items: center;justify-content: center;margin-top: 20px;width: 100px; height: 34px; background: #333; border-radius:6px; font-size: 14px; color: #fff;} a.write_btn{display: flex;align-items: center;justify-content: center;margin-top: 20px;width: 100px; height: 34px; background: #333; border-radius:6px; font-size: 14px; color: #fff;} /* sub0803_view */ .sub0803_view_wrap table.tbl02 th{text-align: left;} .sub0803_view_wrap table.tbl02 th h4.h4_tit01{margin-bottom: 20px;} .sub0803_view_wrap table.tbl02 th span{font-weight: 400;} .sub0803_view_wrap table.tbl02 th .tit_wrap .bot_wrap{display: flex;align-items: center;gap:20px;} .sub0803_view_wrap table.tbl02 th .tit_wrap .bot_wrap span{display: flex;align-items: center;justify-content: center;gap:8px;} .sub0803_view_wrap table.tbl02 th .tit_wrap .bot_wrap span img{display: block;} .sub0803_view_wrap table.tbl02 td{text-align: left;} /* study */ .study_wrap{line-height: 1;} .study_wrap table.tbl01 .col01{width: 80px;} .study_wrap table.tbl01 .col02{} .study_wrap table.tbl01 .col03{width: 150px;} .study_wrap table.tbl01 .col04{width: 280px;} .study_wrap table.tbl01 select{width: 100%; height: 34px; border:1px solid #ddd; border-radius:6px;font-size: 14px; color: #666; margin-bottom: 5px;} .study_wrap table.tbl01 a.btn01{display: flex;align-items: center;justify-content: center;width: 100%;max-width: 120px;height: 34px; font-size: 14px;color: #fff;border-radius:6px;} .study_wrap table.tbl01 a.btn01-2{width: 60px;} .study_wrap table.tbl01 a.submit_btn{border:1px solid var(--purple02);color: var(--purple02);} .study_wrap table.tbl01 .pause_wrap{display: flex;flex-wrap:wrap;gap:5px 10px;align-items: center;justify-content: center;} .study_wrap table.tbl01 .pause_wrap b{font-weight: 700;} .study_wrap table.tbl01 .date_wrap{display: flex;align-items: center;justify-content: center;gap:5px;} .study_wrap table.tbl01 input[type="date"]{width: 115px;height: 34px;border:1px solid #ddd;padding: 0px 10px; border-radius:6px;color: #666;} /* study_view */ .study_view_wrap{line-height: 1;} .study_view_wrap .box_wrap{display: flex;gap:60px;} .study_view_wrap .box_wrap .video_box{width: 660px; } .study_view_wrap .box_wrap .video_wrap{position:relative; width:100%; padding-bottom:56.25%;background: #333;} .study_view_wrap .box_wrap .video_wrap iframe, .study_view_wrap .box_wrap .video_wrap video, .study_view_wrap .box_wrap .video_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .study_view_wrap .box_wrap .list_box{width: calc(100% - 720px);} .study_view_wrap .box_wrap .list_box .tit{margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px;} .study_view_wrap .box_wrap .list_box .tit p{font-size: 20px; color: #222; font-weight: 700;} .study_view_wrap .box_wrap .list_box .tit a.btn01{display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 30px; background: #f1f1f1; color: #555; font-size: 15px; font-weight: 600; transition: .2s;} .study_view_wrap .box_wrap .list_box .tit a.btn01 em{display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #555; font-size: 13px; font-weight: 700; font-style: normal;} .study_view_wrap .box_wrap .list_box .tit a.btn01.bg_green{background: #00c0a9; color: #fff;} .study_view_wrap .box_wrap .list_box .tit a.btn01.bg_green em{background: #fff; color: #00c0a9;} .study_view_wrap .box_wrap .list_box ul{border-top: 2px solid #333;} .study_view_wrap .box_wrap .list_box ul li{border-bottom: 1px solid #ddd;} .study_view_wrap .box_wrap .list_box ul li a{display: flex;gap:10px;padding: 6px 10px;} .study_view_wrap .box_wrap .list_box ul li em{display: flex;align-items: center;justify-content: center; width: 60px; height: 30px; font-size: 16px; color: #fff;font-weight: 700; border-radius:30px; background: var(--blue);} .study_view_wrap .box_wrap .list_box ul li p{width: calc(100% - 70px);font-size: 16px; color: #333;line-height: 1.6;margin-top: 2px;} /* study_coupon */ .study_coupon_wrap{line-height: 1;} .study_coupon_wrap.login_wrap::after{background: url(/assets/images/sub/coupon_bg01.png)center no-repeat; width: 900px; height: 420px; background-size: cover;} .study_coupon_wrap h4{font-size: 20px; color: #222; font-weight: 700;margin-bottom: 20px;} .study_coupon_wrap .input_wrap .input.coupon::after{background: url(/assets/images/sub/coupon_icon01.png)center no-repeat;width: 26px;height: 18px;background-size: cover;} /* cart */ .cart_wrap{line-height: 1;} .cart_wrap .all_chk{margin-bottom: 20px;} .cart_wrap table.tbl02 td .box_wrap{display: flex;gap:60px;} .cart_wrap table.tbl02 td .left_wrap{display: flex;align-items: center;gap:20px;width: 60%;} .cart_wrap table.tbl02 td .left_wrap .img_box{width: 100px;} .cart_wrap table.tbl02 td .left_wrap .img_wrap{position:relative; width:100%; padding-bottom:100%; overflow: hidden; border-radius:12px; border:1px solid #ddd;} .cart_wrap table.tbl02 td .left_wrap .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .cart_wrap table.tbl02 td .left_wrap .txt_box{width: calc(100% - 120px);text-align: left;} .cart_wrap table.tbl02 td .left_wrap .txt_box ul{margin-top: 5px;} .cart_wrap table.tbl02 td .left_wrap .txt_box ul li{position: relative;font-size: 15px; color: #666; line-height: 1.7; padding-left: 12px; } .cart_wrap table.tbl02 td .left_wrap .txt_box ul li::after{content: '·';position: absolute;top: -4px;left: 0;color: var(--blue);font-weight: 700;font-size: 20px;} .cart_wrap table.tbl02 td .right_wrap{display: flex;justify-content: space-between;align-items: center;width: 40%;} .cart_wrap table.tbl02 td .del_btn{display: block;line-height: 18px;width: 22px; height: 22px; border:1px solid #999; border-radius:50%;font-size: 16px; color: #333;font-weight: 700;text-align: center;} .cart_wrap .txt_wrap{margin-top: 20px;text-align: right;} .cart_wrap .txt_wrap span{display: block;font-size: 16px; color: #999;} .cart_wrap .txt_wrap p{font-size: 18px; color: #666; margin-top: 10px;} .cart_wrap .txt_wrap p b{font-weight: 700;} .cart_wrap .btn_wrap_st01 a.n_pay{background: #03c75a;} /*order_search_wrap*/ .order_search_wrap table.tbl03 td a.view_btn{padding: 5px 10px;border-radius:5px;color: #fff; font-size: 15px; background: var(--purple02);} /* order */ .order_wrap .cart_wrap{margin-bottom: 100px;} .order_wrap .tit_flex{display: flex;align-items: baseline;justify-content: space-between;} .order_wrap .pay_wrap{display: flex;gap:10px;} .order_wrap .pay_wrap input[type="radio"]{display: none;} .order_wrap .pay_wrap input[type="radio"] + label{display: flex;align-items: center;justify-content: center;width: calc((100% - 30px) / 4); height: 70px;border:1px solid #ddd; border-radius:12px;font-size: 18px; color: #999; cursor:pointer;} .order_wrap .pay_wrap input[type="radio"]:checked + label{color: var(--blue);border:1px solid var(--blue); font-weight: 700;} /* 약관 */ .privacy_wrap{font-size: 16px; color: #999; line-height: 1.6;} .privacy_wrap h4{font-size: 30px; color: #333; font-weight: 700; margin-bottom: 30px;} .privacy_wrap span{font-weight: 700;} /* sitemap */ .sitemap_wrap{display: flex;flex-wrap:wrap;gap:90px 40px;line-height: 1;} .sitemap_wrap .sitemap{width: calc((100% - 120px) / 4);} .sitemap_wrap .sitemap h3{font-size: 24px; color: #333; font-weight: 700;padding: 0px 10px 20px 10px;border-bottom: 2px solid var(--blue);} .sitemap_wrap .sitemap ul{padding: 30px 10px;} .sitemap_wrap .sitemap ul li{position: relative;padding-left: 15px;} .sitemap_wrap .sitemap ul li::after{content:'·';position: absolute;top: 6px; left: 0;color: var(--blue); font-weight: 700;font-size: 24px;} .sitemap_wrap .sitemap ul li a{font-size: 18px; line-height: 36px; color: #666;} /* member */ .login_wrap{position: relative;width: 460px;margin: 0 auto;padding: 110px 0;line-height: 1;} .login_wrap::after{content:'';position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%); background: url(/assets/images/sub/login_bg02.png)center no-repeat; width: 900px; height: 500px; background-size: cover;z-index: -1;} .login_wrap .bg01{position: absolute;right: -212px; bottom: 0;} .login_wrap .input_wrap .input{position: relative;} .login_wrap .input_wrap .input.id{margin-bottom: 10px;} .login_wrap .input_wrap .input::after{content:'';position: absolute;left: 20px; top: 50%;transform:translateY(-50%);} .login_wrap .input_wrap .input.id::after{background: url(/assets/images/sub/login_icon01.png)center no-repeat;width: 25px;height: 28px;background-size: cover;} .login_wrap .input_wrap .input.pw::after{background: url(/assets/images/sub/login_icon02.png)center no-repeat;width: 24px;height: 30px;background-size: cover;} .login_wrap .input_wrap input{width: 100%;height: 70px; background: #fff;padding: 0px 20px 0px 65px;font-size: 18px; color: #999; border:0px; border-radius:12px;filter: brightness(1.1);} .login_wrap .input_wrap input::placeholder{color: #999;} .login_wrap a.login_btn{display: flex;align-items: center;justify-content: center; height: 70px; margin: 20px 0; border-radius:12px;font-size: 18px; color: #fff;font-weight: 700;} .login_wrap .btn_wrap{display: flex;align-items: center;justify-content: space-between;} .login_wrap .a_wrap{display: flex;gap:34px;} .login_wrap .a_wrap a{position: relative;font-size: 16px; color: #222;} .login_wrap .a_wrap a:not(:last-child)::after{content:'|';position: absolute;top: 50%;right: -18px; transform:translateY(-50%);font-size: 12px; color: #999;} .join01_wrap{line-height: 1;} .join01_wrap .con:not(:last-child){margin-bottom: 80px;} .join01_wrap .con01 .txt_box{font-size: 15px; color: #666; line-height: 24px; padding: 20px;border-radius:12px; border:1px solid #ddd;} .join01_wrap .con01 .txt_box .scr{overflow-y: scroll; height: 124px;} .join01_wrap .con01 .txt_box .scr::-webkit-scrollbar {width: 6px; /* 스크롤바의 너비 */} .join01_wrap .con01 .txt_box .scr::-webkit-scrollbar-thumb{height: 30%; /* 스크롤바의 길이 */background: #ddd; /* 스크롤바의 색상 */border-radius: 10px;} .join01_wrap .con01 .txt_box .scr::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/} .join01_wrap .con01 .txt_box strong{display: block;font-size: 18px; color: #222;margin-bottom: 18px;} .join01_wrap .con01 .chk{margin-top: 10px;} .join01_wrap .con .top_txt{font-size: 16px; color: #222;text-align: right;margin-bottom: 10px;} .join01_wrap .con .input_wrap{display: flex;} .join01_wrap .con .input_wrap:not(:last-child){margin-bottom: 10px;} .join01_wrap .con .input_wrap .tit{display: flex;align-items: center;width: 200px;height: 70px;font-size: 18px; color: #222;font-weight: 700; } .join01_wrap .con .input_wrap .input{width: calc(100% - 200px);} .join01_wrap .con .input_wrap .input input[type="text"], .join01_wrap .con .input_wrap .input input[type="password"], .join01_wrap .con .input_wrap .input select, .join01_wrap .con .input_wrap .input textarea{width: 100%;height: 60px;border:1px solid #ddd;padding: 0px 20px; border-radius:12px;font-size: 18px; color: #666;} .join01_wrap .con .input_wrap .input textarea{padding: 20px; height: 160px;resize:none;} .join01_wrap .con .input_wrap .input input[type="text"]::placeholder, .join01_wrap .con .input_wrap .input input[type="password"]::placeholder, .join01_wrap .con .input_wrap .input textarea::placeholder{color: #999;} .join01_wrap .con .input_wrap .input.flex01{display: flex;gap:10px;} .join01_wrap .con .input_wrap .input.flex01 select{flex:1;} .join01_wrap .con .input_wrap .input.flex01 strong{display: block;font-size: 18px; color: #222;margin-left: 20px;} .join01_wrap .con .input_wrap .ra_wrap.flex{display: flex;align-items: center;gap:30px;height: 70px;} .join01_wrap .con .input_wrap .addr_wrap{display: flex;flex-wrap:wrap;gap:10px;align-items: center;} .join01_wrap .con .input_wrap .addr_wrap input[type="text"]{width: calc((100% - 10px) / 2);} .join01_wrap .con .input_wrap .addr_wrap a.zipcode_btn{display: flex;align-items: center;justify-content: center; width: 100px; height: 46px; border-radius:8px;font-size: 18px; color: #fff;} /*sub0901*/ .sub0901_wrap{line-height: 1;} .sub0901_wrap .con01{padding-bottom: 100px;} .sub0901_wrap .con01 h4{font-size: 30px; color: #333; font-weight: 700; margin-bottom: 40px;} .sub0901_wrap .con01 .img{position: relative;height: 280px; background: url(/assets/images/sub/sub0901_img01.png)center no-repeat; background-size: cover; border-radius:20px;} .sub0901_wrap .con01 .txt{margin-top: 40px;} .sub0901_wrap .con01 .txt p{font-size: 40px; color: #333; line-height: 60px;font-weight: 700;} .sub0901_wrap .con01 .box_wrap{border-top: 2px solid #333; margin-top: 60px;} .sub0901_wrap .con01 .box_wrap .box{display: flex;align-items: center;padding: 40px 30px;border-bottom: 1px solid #ddd;} .sub0901_wrap .con01 .box_wrap .box .left{display: flex;gap:30px;align-items: center;width: 460px;} .sub0901_wrap .con01 .box_wrap .box .left em{display: flex;align-items: center;justify-content: center; width: 70px; height: 32px; font-size: 18px; background: var(--lightblue);color: #fff; border-radius:16px;font-weight: 700;} .sub0901_wrap .con01 .box_wrap .box .left p{font-size: 24px; color: #333; font-weight: 700; line-height: 36px;} .sub0901_wrap .con01 .box_wrap .box .right{width: calc(100% - 460px);} .sub0901_wrap .con01 .box_wrap .box .right p{font-size: 18px; color: #666; line-height: 28px;} .sub0901_wrap .con02{padding: 160px 0;background: url(/assets/images/sub/sub0901_bg01.png)top left 100px no-repeat , url(/assets/images/sub/sub0901_bg02.png)bottom right 230px no-repeat #e8f4ff;} .sub0901_wrap .con02 .txt_wrap p{font-size: 30px; color: #333; font-weight: 700; line-height: 50px;} .sub0901_wrap .con02 .txt_wrap span{display: block;font-size: 18px; color: #666; line-height: 28px; margin-top: 30px;} /* ================================================== sub0601 : 이지 공부방 소개 (sub06/sub01) - 2026.11.05 추가 ================================================== */ .bg_sky{background: #13b5ea;} .conbody > .inner:has(> .sub0601){width: 100% !important; max-width: none !important; padding: 0 !important;} #sub_contents:has(.sub0601){padding-top: 0; padding-bottom: 0;} #sub_contents:has(.sub0601) .contop{display: none;} .sub0601{--navy:#1b3a8f; --sky:#13b5ea;} .sub0601 .sec_tit01 p{font-family: 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing: -0.03em;} .sub0601 .sec_tit01 p b{font-family: 'YeogiOttaeJalnan'; font-weight: 400; color: var(--navy);} .sub0601 .sec_tit01.wh p b{color: #fff;} .sub0601 .tit_bar{padding: 40px 0;} .sub0601 .tit_bar .sec_tit01{margin-bottom: 0;} .sub0601 .tit_bar .sec_tit01 p{font-size: 46px; line-height: 1.4;} .sub0601 .con03 .tit_bar .sec_tit01 p, .sub0601 .con04 .tit_bar .sec_tit01 p, .sub0601 .con05 .tit_bar .sec_tit01 p, .sub0601 .con06 .tit_bar .sec_tit01 p{font-family: 'YeogiOttaeJalnan';} .sub0601 .sub_bar{padding: 25px 20px; text-align: center;} .sub0601 .sub_bar p{font-size: 28px; font-weight: 700; color: #222; line-height: 1.4; letter-spacing: -0.03em;} .sub0601 .con img{display: block; max-width: 100%;} /* top_con */ /* sub0204 .top_con 과 동일 (연두 배경 + 장식 이미지 + 라운드 이미지) */ .sub0601 .top_con{background: url(/assets/images/sub/sub0201_bg01.png)top left 180px no-repeat, url(/assets/images/sub/sub0201_bg02.png)bottom right 150px no-repeat var(--lightgreen);} .sub0601 .top_con .sec_tit01 p{font-family: 'YeogiOttaeJalnan';} .sub0601 .top_con .img_wrap{position: relative; width: 100%; padding-bottom: 44.5%; overflow: hidden; border-radius: 40px;} .sub0601 .top_con .img_wrap img{position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%;} /* con01 : 갤러리 */ .sub0601 .gallery{display: flex; flex-wrap: wrap; gap: 20px;} .sub0601 .gallery li{width: calc((100% - 40px) / 3);} .sub0601 .gallery .img{position: relative; width: 100%; padding-bottom: 71.4%; overflow: hidden; border-radius: 20px;} .sub0601 .gallery .img img{position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s;} .sub0601 .gallery li:hover .img img{transform: scale(1.08);} /* con02 : 대량구매 리스트 + 후기 */ .sub0601 .con02{background: #f7f9fb;} .sub0601 .con02 .buy_list{background: #fff; border-top: 2px solid var(--navy); border-radius: 0 0 20px 20px; padding: 0 30px; box-shadow: 0 10px 30px rgba(0,0,0,.05);} .sub0601 .con02 .buy_list li{display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 20px 0; border-bottom: 1px solid #e5e5e5;} .sub0601 .con02 .buy_list li:last-child{border-bottom: 0;} .sub0601 .con02 .buy_list li .tit{flex: 1; font-size: 18px; color: #333; line-height: 1.5;} .sub0601 .con02 .buy_list li .name{flex-shrink: 0; width: 290px; font-size: 16px; color: #666; text-align: right; line-height: 1.5;} .sub0601 .con02 .buy_list li .name span{color: var(--blue);} .sub0601 .con02 .review_wrap{display: flex; flex-wrap: wrap; gap: 40px; margin-top: 100px;} .sub0601 .con02 .review_wrap .box{width: calc((100% - 40px) / 2); padding: 30px 30px 40px; border-radius: 30px; box-shadow: 8px 8px 16px rgba(0,0,0,.08); transition: transform .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);} .sub0601 .con02 .review_wrap .box:hover{transform: translateY(-10px);} .sub0601 .con02 .review_wrap .box.yellow{background: #fffbe6;} .sub0601 .con02 .review_wrap .box.pink{background: #fdecf1;} .sub0601 .con02 .review_wrap .box.blue{background: #e8f4ff;} .sub0601 .con02 .review_wrap .box .img{position: relative; width: 100%; padding-bottom: 57%; overflow: hidden; border-radius: 16px;} .sub0601 .con02 .review_wrap .box .img img{position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;} .sub0601 .con02 .review_wrap .box .tit{display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 30px 0 20px; padding-bottom: 20px; border-bottom: 1px dashed rgba(0,0,0,.15);} .sub0601 .con02 .review_wrap .box .tit p{font-size: 24px; font-weight: 700; color: #222; line-height: 1.4;} .sub0601 .con02 .review_wrap .box .tit strong{flex-shrink: 0; font-size: 20px; font-weight: 700; color: #222;} .sub0601 .con02 .review_wrap .box .tit strong small{font-size: 15px; font-weight: 400; color: #666;} .sub0601 .con02 .review_wrap .box > span{display: block; font-size: 18px; color: #555; line-height: 1.8;} .sub0601 .con02 .review_wrap .box mark{background: linear-gradient(transparent 55%, #fff27a 55%); color: #333;} /* con03 : 프랜차이즈가 아니다 (sub0204 .con01 과 동일 구성) */ .sub0601 .con03 .sec_tit01 p{font-family: 'YeogiOttaeJalnan';} .sub0601 .con03 .box_wrap{display: flex;gap:30px;align-items: center; margin-bottom: 60px;} .sub0601 .con03 .box_wrap .img_wrap, .sub0601 .con03 .box_wrap .txt_wrap{flex:1;} .sub0601 .con03 .box_wrap .img_wrap img{width: 100%;} .sub0601 .con03 .box_wrap ul.ul_st02 li{color: #333; background: #fff7e5;padding: 15px 50px; border-radius:32px;} .sub0601 .con03 .box_wrap ul.ul_st02 li:not(:last-child){margin-bottom: 10px;} .sub0601 .con03 .box_wrap ul.ul_st02 li::after{left: 30px;top: 28px;} .sub0601 .con03 .box_wrap ul.ul_st02 li b{font-weight: 700; color: #222;} .sub0601 .con03 .box_wrap ul.ul_st02 li small{font-size: 0.8em; color: #888;} /* con04 : 딱 필요한 것만 (sub0202 .con03 과 동일 구성, 박스 3개) */ .sub0601 .con04 .sec_tit01 p{font-family: 'YeogiOttaeJalnan';} .sub0601 .con04 .box_wrap{display: flex;gap:10px;} .sub0601 .con04 .box_wrap .box{position: relative;width: calc((100% - 20px) / 3); padding: 0px 10px 60px;background: #fff; border-radius:20px;} .sub0601 .con04 .box_wrap .box::after{content:'';position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%);width: calc(100% - 20px); height: calc(100% - 20px); border-radius:12px; border:3px solid var(--orange); pointer-events:none;} .sub0601 .con04 .box_wrap .box .icon{display: flex;align-items: center;justify-content: center;height: 185px;} .sub0601 .con04 .box_wrap .box .txt_wrap{text-align: center;} .sub0601 .con04 .box_wrap .box .txt_wrap p{font-size: 24px; color: #333;} .sub0601 .con04 .box_wrap .box .txt_wrap span{display: block;font-size: 18px; color: #666; line-height: 28px;margin-top: 30px;} /* 하단 이미지 영역 : 어떤 사이즈 이미지도 영역 안에 꽉 차게 */ .sub0601 .con04 .img_wrap{position: relative; width: 60%; padding-bottom: 36%; margin: 60px auto 0; overflow: hidden; border-radius: 30px; background: #fff8dc;} .sub0601 .con04 .img_wrap img{position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain;} /* con05 : 틀림없이 뗍니다 (sub0202 맞춤 학습 카드 구성, 2개) */ .sub0601 .con05 .sec_tit01 p{font-family: 'YeogiOttaeJalnan'; color: #222;} .sub0601 .con05 .sec_tit01 p em{color: #5fb000;} /* 포인트 : 진한 연두 */ .sub0601 .con05 .sec_tit01 span b{font-weight: 700; color: var(--orange);} /* 포인트 : 주황 */ .sub0601 .con05 .box_row .box .img{position: relative; width: 100%; padding-bottom: 60%; overflow: hidden; border-radius: 16px;} .sub0601 .con05 .box_row .box .img img{position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;} .sub0601 .con05 .box_row .box .txt p{margin-bottom: 8px; font-weight: 700;} /* con06 : 양방향 인터렉티브 학습 영상 */ .sub0601 .con06{padding-bottom: 120px;} .sub0601 .con06 .feature_img{margin-top: 80px; overflow: hidden; border-radius: 20px;} /* 위 갤러리 폭(inner)에 맞춘 이미지 1장 */ .sub0601 .con06 .feature_img img{width: 100%; height: auto;} .sub0601 .bot_con{padding: 120px 0;} /* 배너 높이 축소 (sub02 기본 200px) */ /* con08 : 조이쌤 STORY (유튜브 + 버튼) */ .sub0601 .con08{background: #f3fbe4;} .sub0601 .con08 .sec_tit01 p{font-family: 'YeogiOttaeJalnan'; color: #222;} .sub0601 .con08 .sec_tit01 p em{color: #5fb000;} .sub0601 .con08 .sec_tit01 span b{font-weight: 700; color: #333;} .sub0601 .con08 .video_wrap{position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding-bottom: 56.25%; overflow: hidden; border-radius: 24px; background: #000; box-shadow: 0 20px 40px rgba(0,0,0,.12);} @supports (aspect-ratio: 16 / 9){ .sub0601 .con08 .video_wrap{padding-bottom: 0; aspect-ratio: 16 / 9;} } .sub0601 .con08 .video_wrap iframe{position: absolute; inset: 0; width: 100%; height: 100%;} .sub0601 .con08 .btn_wrap{display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 50px;} .sub0601 .con08 .btn_wrap a{display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 520px; height: 80px; border-radius: 20px; font-size: 26px; font-weight: 500; transition: transform .3s;} .sub0601 .con08 .btn_wrap a:hover{transform: translateY(-4px);} .sub0601 .con08 .btn_wrap a b{font-weight: 800;} .sub0601 .con08 .btn_wrap .btn01{background: #c9f58a; color: #4a9a00;} .sub0601 .con08 .btn_wrap .btn01 i{font-style: normal; font-size: 20px;} /* con07 : GIF 영역 (2열, 16:9) */ .sub0601 .con07 .gif_list{display: flex; flex-wrap: wrap; gap: 30px;} .sub0601 .con07 .gif_list li{width: calc((100% - 30px) / 2);} .sub0601 .con07 .gif_list .img{position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; border-radius: 20px; background: #f2f4f6;} .sub0601 .con07 .gif_list .img img{position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;} .sub0601 .bot_con .sec_tit01{margin-bottom: 0;} /* sub02 bot_con 재사용 (버튼 없어 하단 여백 제거) */ .sub0601 .bot_con .sec_tit01 p{font-family: 'YeogiOttaeJalnan';} .sub0601 .bot_con .sec_tit01 p em{color: #ffe14d;} /* 포인트 : 노랑 */ .sub0601 .bot_con .sec_tit01 span b{font-weight: 700; color: #c8ff6e;} /* 포인트 : 연두 */ /* 최하단 bot_end : sub02 bot_con 원래 여백 그대로 */ .sub0601 .bot_con.bot_end{padding: 200px 0;} .sub0601 .bot_con.bot_end a.more_btn_st02{width: fit-content; min-width: 300px; padding: 0 40px;} /* 버튼 문구가 길어 폭 확장 */ .sub0601 .bot_con.bot_end .sec_tit01{margin-bottom: 100px;} /* //sub0601 */ /* sub0401 금액 (정가 > 할인가 > 특별할인가 : 특별할인가는 공부방 선생님만) */ .sub0401_wrap .list_wrap .list .img_wrap .teacher_badge{position: absolute;left: 12px;top: 12px;z-index: 2;display: flex;align-items: center;gap: 6px;height: 32px;padding: 0 14px 0 12px;border-radius: 16px;background: #1f56d6;font-size: 14px;color: #fff;font-weight: 700;} .sub0401_wrap .list_wrap .list .img_wrap .teacher_badge::before{content: '';display: block;width: 18px;height: 14px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath fill='%23fff' d='M1 4l4.5 3.5L10 1l4.5 6.5L19 4l-2 10H3z'/%3E%3C/svg%3E") center / contain no-repeat;} .sub0401_wrap .list_wrap .list .price_wrap{margin-top: 24px;} .sub0401_wrap .list_wrap .list .price_wrap .price_st02{display: flex;align-items: stretch;} .sub0401_wrap .list_wrap .list .price_wrap .price_col{flex: 1;display: flex;flex-direction: column;justify-content: center;gap: 10px;min-width: 0;padding: 6px 0 6px 12px;border-left: 1px solid #e8e8e8;} .sub0401_wrap .list_wrap .list .price_wrap .price_col:first-child{flex: 0.85;padding-left: 0;border-left: 0;} .sub0401_wrap .list_wrap .list .price_wrap .price_col span{display: flex;align-items: center;gap: 5px;font-size: 14px;color: #777;white-space: nowrap;} .sub0401_wrap .list_wrap .list .price_wrap .price_col span i{display: inline-block;padding: 2px 7px;border-radius: 10px;background: #ff2e7a;font-size: 12px;color: #fff;font-weight: 700;font-style: normal;} .sub0401_wrap .list_wrap .list .price_wrap .price_col del{display: block;font-size: 14px;color: #aaa;white-space: nowrap;} .sub0401_wrap .list_wrap .list .price_wrap .price_col p{margin-top: 0;font-size: 19px;color: #222;font-weight: 700;letter-spacing: -0.02em;white-space: nowrap;} .sub0401_wrap .list_wrap .list .price_wrap .price_arr{position: relative;flex: 0 0 18px;} .sub0401_wrap .list_wrap .list .price_wrap .price_arr::after{content: '';position: absolute;left: 4px;top: 50%;width: 6px;height: 6px;border-top: 1.5px solid #888;border-right: 1.5px solid #888;transform: translateY(-50%) rotate(45deg);} .sub0401_wrap .list_wrap .list .price_wrap .price_col.special{flex: 1.2;align-items: center;gap: 6px;padding: 12px 6px;border-left: 0;border-radius: 10px;background: #eaf2ff;text-align: center;} .sub0401_wrap .list_wrap .list .price_wrap .price_col.special span{font-size: 14px;color: #1f56d6;font-weight: 700;} .sub0401_wrap .list_wrap .list .price_wrap .price_col.special p{font-size: 20px;color: #173f9e;font-weight: 800;} .sub0401_wrap .list_wrap .list .price_wrap .price_col.special b{display: inline-block;padding: 2px 10px;border-radius: 11px;background: #0e1f4d;font-size: 12px;color: #fff;font-weight: 700;} /* //sub0401 금액 */ /* sub0201 등록증명서 : 이미지 1장 (교구 사용법 영역과 같은 900 x 380) */ .sub0201 .con10 .cer_wrap.cer_single{display: block; aspect-ratio: 900 / 380; padding: 0; gap: 0; background: #fff; border-radius: 20px; overflow: hidden;} .sub0201 .con10 .cer_wrap.cer_single .cer, .sub0201 .con10 .cer_wrap.cer_single .cer .img{width: 100%; height: 100%;} .sub0201 .con10 .cer_wrap.cer_single .cer img{display: block; width: 100%; height: 100%; object-fit: cover; border: none;} /* //sub0201 등록증명서 */ /* sub0702 상단 비주얼 : sub0601 top_con 과 같은 구성 (주황 배경) */ .sub0702_top .top_con{background: url(/assets/images/sub/sub0201_bg01.png)top left 180px no-repeat, url(/assets/images/sub/sub0201_bg02.png)bottom right 150px no-repeat var(--orange);} .sub0702_top .top_con .sec_tit01 p{font-family: 'YeogiOttaeJalnan';} .sub0702_top .top_con .img_wrap{position: relative; width: 100%; padding-bottom: 44.5%; overflow: hidden; border-radius: 40px;} .sub0702_top .top_con .img_wrap img{position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%;} /* //sub0702 상단 비주얼 */ /* sub0401 금액 글씨 +1px */ .sub0401_wrap .list_wrap .list .price_wrap .price_col span{font-size: 15px;} .sub0401_wrap .list_wrap .list .price_wrap .price_col del{font-size: 15px;} .sub0401_wrap .list_wrap .list .price_wrap .price_col p{font-size: 20px;} .sub0401_wrap .list_wrap .list .price_wrap .price_col.special span{font-size: 15px;} .sub0401_wrap .list_wrap .list .price_wrap .price_col.special p{font-size: 21px;} /* //sub0401 금액 글씨 +1px */ /* sub0401 이벤트상품 표시 (일반회원) */ .sub0401_wrap .list_wrap .list .img_wrap .event_badge{position: absolute;left: 12px;top: 12px;z-index: 2;display: flex;align-items: center;height: 32px;padding: 0 14px;border-radius: 16px;background: #ff2e7a;font-size: 14px;color: #fff;font-weight: 700;} /* sub0401 이벤트상품 표시 : 반짝임 (빛이 지나가는 효과 + 은은한 빛남) */ .sub0401_wrap .list_wrap .list .img_wrap .event_badge{overflow: hidden; animation: event_glow 1.6s ease-in-out infinite;} .sub0401_wrap .list_wrap .list .img_wrap .event_badge::after{content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: event_shine 2.2s ease-in-out infinite;} @keyframes event_shine{0%{left: -60%;} 60%,100%{left: 130%;}} @keyframes event_glow{0%,100%{box-shadow: 0 0 0 0 rgba(255,46,122,.55);} 50%{box-shadow: 0 0 12px 3px rgba(255,46,122,.65);}} @media (prefers-reduced-motion: reduce){.sub0401_wrap .list_wrap .list .img_wrap .event_badge, .sub0401_wrap .list_wrap .list .img_wrap .event_badge::after{animation: none;}} /* //sub0401 이벤트상품 반짝임 */