/* 서브 공통 */ :root { --border-radius: 20px; } #footer{ margin-top: -1px; } body{ background: transparent !important; } #header.sub_header{ transition: background .3s, transform .3s; } #header.sub_header.ac{ background-color: #fff; } #header.sub_header.ss{ transform: translateY(-100%); } #header.sub_header.ac{ background-color: #fff; } #header.b_header #logo svg{ overflow: visible; } #header.b_header #logo svg path{ fill: #5B6670; } #header.b_header #logo svg rect{ fill: #5B6670; } #header.b_header #logo svg #패스_17{ fill: #3cb4e5; } #header.ac #logo svg path{ fill: #5B6670; } #header.ac #logo svg rect{ fill: #5B6670; } #header.act #logo svg #패스_17{ fill: #3cb4e5; } #header.ac #logo svg #패스_17{ fill: #3cb4e5; } #header.ac .hd_wrap .l #gnb > ul > li > a{ color: #5B6670; font-weight: 600; } #header.ac .hd_wrap #gnb2 ul li a{ color: #5B6670; font-weight: 600; } #header.ac .hd_wrap #lang button span{ color: #5b6670; } #header.ac .hd_wrap #lang button svg *{ stroke: #5b6670; } #header.ac .hd_wrap #login_btn ul li a{ color:#5B6670; } #header.ac .hd_wrap #login_btn ul li a:after{ background-color: #5b6670; } #sub .share{display: block!important;} #sub.view .share{display: block!important;position: relative} #header.b_header .hd_wrap .l #gnb > ul > li > a{ color: #5B6670; font-weight: 600; } #header.b_header .hd_wrap #gnb2 ul li a{ color: #5B6670; font-weight: 600; } #header.b_header .hd_wrap #lang button span{ color: #5b6670; } #header.b_header .hd_wrap #lang button svg *{ stroke: #5b6670; } #header.b_header .hd_wrap #login_btn ul li a{ color:#5B6670; } #header.b_header .hd_wrap #login_btn ul li a:after{ background-color: #5b6670; } #header.act .hd_wrap .l #gnb > ul > li > a{ color: #fff; font-weight: 400; } #header.act .hd_wrap .l #gnb > ul > li:hover > a{ color: #67d3ff; } #header.b_header #logo svg path{ transition: fill .7s; } #header.act #logo svg path{ fill:#fff; } #header.act .hd_wrap #gnb2 ul li a{ color: #fff; font-weight: 400; } #header.act .hd_wrap #lang button{ } #header.act .hd_wrap #lang button span{ color: #fff; } #header .hd_wrap #lang button span{ transition: color .7s; } #header.act .hd_wrap #lang button svg *{ stroke: #fff; } #header.b_header .hd_wrap #lang button svg *{ transition: stroke .7s; } #header.act .hd_wrap #login_btn ul li a{ color: #fff; } .inner{ width: 1420px; margin: 0 auto; } .sub_visual{ background-color: #F2F6F9; height: 400px; padding-top: 70px; position: relative; overflow: hidden; } .sub_visual .visual_img{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width: 100%; height: 100%; } .sub_visual .visual_img img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.1); transition: transform 2s; min-width: 100%; } .sub_visual .inner{ HEIGHT: 100%; display: flex; flex-flow: column; justify-content: center; gap: 30px; position: relative; z-index: 1; } .sub_visual .inner > strong{ display: block; font-size: 60px; font-weight: 600; color:#fff; text-align: left; } .sub_visual .inner ul{ display: flex; gap: 10px; align-items: center; } .sub_visual .inner ul .dot{ width: 3px; height: 3px; border-radius: 50%; background-color: #A5ADB4; } .sub_visual .inner ul li{ font-size: 18px; color: #FFFFFF; font-weight: 300; } .sub_visual .inner ul li:last-child{ font-weight: 500; } .sub_visual .inner ul li.home svg path{ stroke: #fff; } .sub_visual.on .visual_img img{ transform: translate(-50%,-50%) scale(1); } #sub.board .sub_visual .inner > strong{ color:#000000; } #sub.board .sub_visual .inner ul .dot{ background-color: #A5ADB4; } #sub.board .sub_visual .inner ul li{ color: #5B6670;} #sub.board .sub_visual .inner ul li.home svg path{ stroke: #5b6670; } #sub.board.board_w .sub_visual .inner > strong{color: #fff} #sub.board.board_w .sub_visual .inner > p{color: #fff;font-size: 21px;line-height: 1.5;font-weight: 300} #sub.board.board_w .sub_visual .inner > p{ transition: transform .8s, opacity .8s; transform: translateX(40px); opacity: 0;transition-delay: 0.3s } #sub.board.board_w .sub_visual.on .inner > p{ transform: translateX(0); opacity: 1; } .sub_nav.no_fix{ margin-top: 10px; } .sub_nav.fix_nav{ position: fixed; left: 0; top: 10px; width: 100%; z-index: 10; transform: translateY(-100%); transition: transform .3s, opacity .3s; opacity: 0; } .sub_nav.fix_nav.act{ transform: translateY(0); opacity: 1; } .sub_nav .inner{ border-radius: 120px; background-color: #F2F6F8; padding: 15px 0; position: relative; } .sub_nav button{ display: none; } .sub_nav .sub_n{ display: flex; align-items: center; justify-content: center; gap: 10px; } .sub_nav .sub_n .loc_li{ width: 16.66666666%; max-width: 220px; } .sub_nav .sub_n .loc_li a{ display: block; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; color:#FFFFFF; background-color: #A6BDC6; font-size: 18px; font-weight: 500; border-radius: 70px; position: relative; } .sub_nav .sub_n .loc_li.on a{ box-shadow: 0 0 20px rgba(0,72,129,0.25); background-color: #0090FF; } .sub_nav .sub_n .loc_li.on a:after{ content:""; display: block; width: 8px; height: 8px; background-color: #0090FF; border-radius: 50%; position: absolute; left: 50%; bottom: -12px; transform: translate(-50%,100%); } .sub_nav .share{ position: absolute; right: 20px; top: 50%; transform: translate(0,-50%); z-index: 2; display: none} /* #sub .share{ position: absolute; right: 20px; top: 50%; transform: translate(0,-50%); } */ #sub .share > a{ display: flex; flex-wrap: nowrap; position: relative; overflow: hidden; width: 150px; height: 50px; align-items: center; flex-direction: row; position: relative; border: 1px solid #D9E3E8; background-color: #fff; border-radius: 100px; } #sub .share > a > div{ width: 200%; height: 100%; position: absolute; left: 0; top: 0; display: flex; transition: left .3s; } #sub .share > a > div > div{ width: 50%; height: 100%; } #sub .share > a strong{display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; } #sub .share > a .de strong{ color:#24B6F2; font-size: 18px; font-weight: 500; } #sub .share > a .hover strong{ color:#fff; font-size: 18px; font-weight: 500; } #sub .share > a:hover{ border-color: #24B6F2; background-color: #24B6F2; } #sub .share > a:hover > div{ left: -100%; } #sub .share .share_p{ position: absolute; right: 0; top: 100%; transform: translate(0,10px); border-radius: 8px; background-color: #fff; border: 1px solid #D9E3E8; padding: 20px; display: none; } #sub .share .share_p .sns_b ul{ display: flex; gap: 8px; } #sub .share .share_p .sns_b ul li img{ display: block; } #sub .share .share_p .sns_b ul li{height: 40px;} #sub .share .share_p .sns_b ul li a{display: block;width: 100%;border-radius: 50%;overflow: hidden;height: 100%} #sub .share .share_p .sns_b ul li a img{height: 100%;width: 40px;} #sub .share .share_p .sns_b ul li span{display: block;height: 100%} #sub .share .share_p .copy{ width: 220px; height: 38px; position: relative; margin-top: 8px; border-radius:50px; border: 1px solid #d9e3e8; } #sub .share .share_p .copy p{ font-size: 16px; color: #666; line-height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 16px; width: calc(100% - 90px); } #sub .share .share_p .copy button{ display: block; position: absolute; right: 5px; top: 50%; transform: translate(0,-50%); font-size: 14px; width: 70px; height: 28px; background-color: #24b6f2; border-radius: 50px; color: #fff; } #sub .share .share_p .close_bs{ position: absolute; right: 20px; top: 20px; cursor: pointer; } #sub .in_pd{ padding-top: 120px; } #sub .con_w{ padding-bottom: 120px; } #sub .color_bg{ padding-top: 120px; background-color: #F2F6F8; } #sub .in_pd2{ padding-bottom: 70px; } #sub .sub_con{ position: relative; } #sub .sub_con .con01{ padding-top: 56px; } #sub .br{ display: block; } #sub .s_tit{ display: flex; flex-flow: column; gap: 30px; } #sub .st01{ font-size: 42px; font-weight: 400; color:#000000; display: block; } #sub .st02{ font-size: 36px; font-weight: 400; color:#000000; display: block; display: flex; align-items: flex-end; gap: 10px; line-height: 1.5em; } #sub .st03{ font-size: 24px; font-weight: 700; color:#000000; padding-bottom: 20px; border-bottom: 1px solid #D9E3E8; position: relative; display: block; margin-bottom: 20px; text-align: left; display: flex; gap: 20px; align-items: center; } #sub .st03:after{ content:""; display: block; width: 41px; height: 3px; background-color: #3CB4E5; position: absolute; left: 0; bottom: -2px; } #sub .st03 span{ font-size: 16px; color: #999999; font-weight: 400; } #sub .st03 span b{ color: #000; } #sub .st02 span{ font-weight: 400; font-size: 18px; } #sub .p01{ font-size: 22px; line-height: 40px; font-weight: 400; color:#333333; } #sub .p02{ font-size: 24px; line-height: 1.5em; font-weight: 400; color:#000000; } #sub .p03{ font-size: 16px; line-height: 30px; font-weight: 400; color:#666666; } #sub .info_p{ font-size:16px; line-height: 1.5em; font-weight: 300; color:#999999; text-align: center; margin-top: 30px; } #sub .info_p2{ font-size:20px; line-height: 1.5em; font-weight: 400; color:#666; text-align: center; margin-top: 30px; } #sub .info_p4{ font-size:16px; line-height: 1.5em; font-weight: 400; color:#999; text-align: right; margin-top: 0; margin-bottom: 20px; } .info_p3{ font-size:14px; line-height: 1.5em; font-weight: 400; color:#999999; text-align: right; margin-top: 12px; } #sub .p01 b{ font-weight: 700; color: #000; } #sub .img > img{ display: block; width :100%; } #sub .color{ color: #3CB4E5; } /* 준비중페이지 */ #sub.parking .p_con{ height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; flex-flow: column;text-align: center; background: url('/img/sub/parking.jpg') center center no-repeat; background-size: cover; } #sub.parking .p_con strong{ font-size: 50px; font-weight: 400; color: #fff; display: block; } #sub.parking .p_con{ gap: 30px; } #sub.parking .p_con strong b{ font-weight: 600; } #sub.parking .p_con p{ font-size: 20px; line-height: 32px; color:#FFFFFF; font-weight: 300; } /* 뮤지엄 공통 */ #sub.hdl .con01 .inner{ display: flex; align-items: center; } #sub.hdl .con01 .inner > div{ width: 50%; } #sub.hdl .img_ul li .img img{ border-radius: var(--border-radius); } #sub.hdl .img_ul{ display: flex; gap: 40px; border-bottom: 1px solid #D9E3E8; } #sub.hdl .img_ul li{ width: 50%; } #sub.hdl .img_ul li .txt{ padding: 30px 0; text-align: center; } #sub.hdl .h_table{ padding-top: 20px; border-top: 2px solid #D9E3E8; margin-top: 20px; display: flex; gap: 10px; } #sub.hdl .h_table > div{ display: flex; flex-flow: column; gap: 10px; } #sub.hdl .h_table > div > div{ height: 70px; display: flex; align-items: center; justify-content: center; text-align: center; } #sub.hdl .h_table .cate{ width: 220px; } #sub.hdl .h_table .cate > div{ border-radius: 10px; background-color: #E4EBEF; font-size: 22px; color:#000000; font-weight: 600; } #sub.hdl .h_table .cate > div:first-child{ background-color: transparent; border: 1px solid #D9E3E8; } #sub.hdl .h_table .tb{ width: calc(50% - 10px); } #sub.hdl .h_table .tb > div{ border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; } #sub.hdl .h_table .tb .h_th{ border: none; border-radius: 10px; color: #FFFFFF; font-size: 22px; font-weight: 600; position: relative; } #sub.hdl .h_table .tb .h_th img{ display: block; position: absolute; left: 55%; top: 35%; filter: drop-shadow(0 20px 20px rgba(6,23,59,0.3)); animation: lipo ease-in-out 2s infinite; } #sub.hdl .h_table .tb01 .h_th{ background-color: #A6BDC6; } #sub.hdl .h_table .tb02 .h_th{ background-color: #16A5EF; } #sub.hdl .h_table .tb02 .h_th img{ top: 10% } #sub.hdl .h_table .tb > div > strong{ display: block; display: none; } #sub.hdl .h_table .tb > div > p{ font-size: 20px; line-height: 27px; color:#333333; text-align: center; } #sub.hdl .h_table .tb01 > div > p > b{ color: #FF0000; } #sub.hdl .h_table .tb02 > div > p > b{ color: #0077FF; } #sub.hdl .qna{ display: flex; flex-flow: column; gap: 60px; } #sub.hdl .qna dl{ display: flex; align-items: center; gap: 30px; } #sub.hdl .qna dl dd{ border-left: 1px solid #D9E3E8; padding-left: 30px; } #sub.hdl .wrap .tag_ul{ display: flex; gap: 40px; } #sub.hdl .wrap .tag_ul li{ width: 50%; text-align: center; } #sub.hdl .wrap .tag_ul li .tag{ border-radius: 11px; padding: 0 30px; height: 54px; margin: 0 auto; position: relative; z-index: 1; display: inline-block; } #sub.hdl .wrap .tag_ul li .tag:after{ content:""; display: block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 2px solid #fff; position: absolute; left: 50%; top: 4px; transform: translate(-50%,-100%); } #sub.hdl .wrap .tag_ul li .tag strong{ font-size: 24px; font-weight: 500; color: #fff; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #sub.hdl .wrap .tag_ul .ac .tag{ background-color: #16A5EF; } #sub.hdl .wrap .tag_ul .ac .tag:after{ background-color: #16A5EF; } #sub.hdl .wrap .tag_ul li .tag{ background-color: #A6BDC6; } #sub.hdl .wrap .tag_ul li .tag:after{ background-color: #A6BDC6; } #sub.hdl .wrap .tag_ul li .img{ margin-top: -27px; position: relative; } #sub.hdl .wrap .tag_ul .ac .img:after{ content:""; display: block; width: 100%; height: 100%; border: 4px solid #16A5EF; position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: var(--border-radius); } #sub.hdl .wrap .tag_ul li .img img{ border-radius: var(--border-radius); } #sub.hdl .wrap .tag_ul li .txt{ margin-top: 28px; text-align: center; } #sub.hdl .wrap .tag_ul li .txt .p02{ color: #333; } #sub.hdl .wrap .tag_ul li .txt .p02 b{ color: #000; } /* 콜레스테롤이란? */ #sub.hdl01 .con04 .st02{ display: block; } #sub.hdl01 .con04 .h01{ display: flex; align-items: center; } #sub.hdl01 .con04 .h01 > div{ width: 50%; } #sub.hdl01 .con04 .h01 .s_tit{ padding-left: 40px; } #sub.hdl01 .con04 .h02{ border-radius: var(--border-radius); background-color: #F2F6F8; display: flex; flex-flow: row-reverse; align-items: center; } #sub.hdl01 .con04 .h02 > div{ width: 50%; } #sub.hdl01 .con04 .h02 .txt{ padding-left: 60px; } #sub.hdl01 .con05{ background: url('/img/sub/hdl01_bg01.jpg') center center no-repeat; background-size: cover; } #sub.hdl01 .con05 .st02{ display: block; color: #fff; margin-bottom: 20px; } #sub.hdl01 .con05 .img img{ margin: 0 auto; } #sub.hdl01 .con07 .st01{ display: block; margin-bottom: 60px; padding-bottom: 20px; border-bottom: 1px solid #D9E3E8; position: relative; } #sub.hdl01 .con07 .st01:after{ content:""; display: block; width: 336px; height: 4px; background-color: #3CB4E5; position: absolute; left: 0; bottom: -2px; } #sub.hdl .st_box{ border-radius: var(--border-radius); background: rgb(240,245,248); background: linear-gradient(90deg, rgba(240,245,248,1) 0%, rgba(240,245,248,0) 50%, rgba(240,245,248,1) 100%); padding: 38px 0; text-align: center; display: flex; flex-flow: column; gap: 5px; justify-content: center; align-items: center; } #sub.hdl01 .con06 .wrap{ margin-top: 20px; } #sub.hdl01 .con06 .wrap > svg{ display: block; width: calc(100% - 690px); height: auto; margin: 0 auto; } #sub.hdl01 .con07 .wrap{ display: flex; flex-flow: row-reverse; justify-content: space-between; } #sub.hdl01 .con07 .wrap .img{ max-width: 600px; } #sub.hdl01 .con07 .wrap .img img{ border-radius: var(--border-radius); } #sub.hdl02 .con02{ background: url('/img/sub/hdl02_bg01.jpg') center center no-repeat; background-size: cover; text-align: center; } #sub.hdl02 .con02 .p01{ display: inline-block; padding: 25px 70px; border-radius: 100px; color: #BAC6E4; background-color: #0B2C58; margin-top: 56px; } #sub.hdl02 .con02 .p01 b{ color: #fff; } #sub.hdl02 .con03 .st_box .p02{ font-weight: 700; } #sub.hdl02 .con03 .st_box .p02 b{ color: #3CB4E5; } #sub.hdl02 .con03 .wrap{ padding-bottom: 35px; border-bottom: 1px solid #D9E3E8; } #sub.hdl02 .con03 .wrap .tag_ul .tag{ } #sub.hdl02 .con03 .wrap .tag_ul li .tag:after{ display: none; } #sub.hdl02 .con03 .vs{ display:flex; align-items: center; justify-content: center; gap: 20px; margin-top: 50px; margin-bottom: 60px; } #sub.hdl02 .con03 .vs > div{ display:flex; align-items: center; gap: 20px; } #sub.hdl02 .con03 .vs > div > .img{ padding:6px; border-radius: 50%; background-color: #F2F6F8; border: 2px solid #A6BDC6; } #sub.hdl02 .con03 .vs > div > strong{ font-size: 26px; color:#A5BCC5; font-weight: 500; } #sub.hdl02 .con03 .vs > p{ font-size: 18px; font-weight: 600; color:#A5BCC5; } #sub.hdl02 .con03 .vs .vs02{ flex-flow: row-reverse; } #sub.hdl02 .con03 .vs .vs02 .img{ border-color:#3CB4E5; } #sub.hdl02 .con03 .vs .vs02 > strong{ color: #3CB4E5; } #sub.hdl02 .con04 .st02{ text-align: center; justify-content: center; margin-bottom: 60px; } #sub.hdl02 .con04 .img_ul2 ul{ display: flex; gap: 80px; position: relative; } #sub.hdl02 .con04 .img_ul2 ul:after{ content:""; display: block; width: 1px; height: calc(100% - 54px); background-color: #D9E3E8; position: absolute; left: 50%; top: 0;} #sub.hdl02 .con04 .img_ul2 ul li{ width: 50%; } #sub.hdl02 .con04 .img_ul2 ul .img img{ border-radius: var(--border-radius); } #sub.hdl02 .con04 .img_ul2 li .txt{ margin-top: 24px; } #sub.hdl02 .con04 .img_ul2 li .p03{ text-align: center; } #sub.hdl02 .con04 .info_p{ color: #666; } #sub.hdl02 .con05 .s_tit{ text-align: center; justify-content: center; margin-bottom: 30px; } #sub.hdl02 .con05 .wrap .tag_ul li .tag:after{ display: none; } #sub.hdl02 .con05 .wrap{ padding-bottom: 20px; border-bottom: 1px solid #D9E3E8; } #sub.hdl02 .con05 .h01{ display: flex; align-items: center; gap: 30px; } #sub.hdl02 .con05 .h01 .img{ position: relative; } #sub.hdl02 .con05 .h01 .img:after{ content:"="; font-size: 42px; font-weight: 400; color: #000; position: absolute; right: 0; top: 50%; transform: translate(100%,-50%); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } #sub.hdl02 .con05 .h01 .arrow ul{ display: flex; gap: 30px; } #sub.hdl02 .con05 .p_box{ padding: 58px 20px; border-radius: var(--border-radius); background-color: #F2F6F8;text-align: center; margin-top: 30px; margin-bottom: 60px; } #sub.hdl02 .con05 .wrap{ border-top: 1px solid #D9E3E8; padding-top: 60px; } #sub.hdl02 .con05 .wrap .st01{ text-align: center; justify-content: center; margin-bottom: 60px; } #sub.hdl02 .con06 .st01{ text-align: center; justify-content: center; margin-bottom: 60px; } #sub.hdl02 .con06 .exercise{ text-align: center; } #sub.hdl02 .con06 .st_box{ display: inline-block; padding: 26px 90px; background: rgb(224,236,243); background: linear-gradient(90deg, rgba(224,236,243,1) 0%, rgba(224,236,243,0) 50%, rgba(224,236,243,1) 100%); } #sub.hdl02 .con06 .st_box p{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #sub.hdl02 .con06 .line span:nth-child(1){ width: 1px; height: 20px; content:""; display: block; border: 1px dashed #9DC8DE; margin: 0 auto; } #sub.hdl02 .con06 .line span:nth-child(2){ width: calc(100% - 160px); height: 0.5px; content:""; display: block; border: 1px dashed #BCD2DE; margin: 0 auto; } #sub.hdl02 .con06 .exercise ul li:before{ width: 0.5px; height: 20px; content:""; display: block; border: 1px dashed #9DC8DE; margin: 0 auto; } #sub.hdl02 .con06 .exercise ul{ display: flex; gap: 20px; } #sub.hdl02 .con06 .exercise ul li { width: 12.5%; filter: drop-shadow(10px 10px 10px rgba(0,55,126,0.05)); } #sub.hdl02 .con06 .exercise ul li .img{ margin-bottom: 20px; } #sub.hdl02 .con06 .exercise ul li .img img{ border-radius: 12px; border: 2px solid #D9E3E8; } #sub.hdl02 .con06 .exercise ul li .txt strong{ font-size: 18px; font-weight: 300; color: #000000; } #sub.hdl02 .con06 .exercise .p01{ margin-top: 60px; } #sub.hdl02 .con06 .graph { padding-top: 120px; } #sub.hdl02 .con06 .graph > strong{ display: block; font-size: 36px; font-weight: 700; color:#000000; text-align: center; margin-bottom: 60px; } #sub.hdl02 .con06 .graph .wrap2{ display: flex; gap: 80px; position: relative; align-items: center; } #sub.hdl02 .con06 .graph .wrap2 .all{ width: 425px; height: 391px; border-radius: var(--border-radius); border: 2px solid #16A5EF; display: flex; align-items: center; justify-content: center; } #sub.hdl02 .con06 .graph .wrap2 ul{ display: flex; gap: 40px; width: calc(100% - 505px); } #sub.hdl02 .con07 .c_tit{ display: flex; flex-flow: column; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid #D9E3E8;} #sub.hdl02 .con07 .c_tit strong{ font-size: 30px; font-weight: 400; color:#000000; } #sub.hdl02 .con07 .box{ padding: 60px 0; padding-bottom: 80px; border-bottom: 1px solid #D9E3E8; } #sub.hdl02 .con07 .box02{ padding-bottom: 0; border-bottom: none; } #sub.hdl02 .con07 .box{ display: flex; align-items: center; } #sub.hdl02 .con07 .box .right{ width: 50%; } #sub.hdl02 .con07 .box .right .img img{ border-radius: var(--border-radius); } #sub.hdl02 .con07 .box .txt{ width: 50%; padding-right: 50px; } #sub.hdl02 .con07 .box .p_box{ margin-top: 10px; border-radius: var(--border-radius); border: 1px solid #D9E3E8; padding: 30px 40px; text-align: center; } #sub.hdl02 .con07 .box .p_box p{ font-size: 18px; font-weight: 300; color:#666666; margin-bottom: 10px; } #sub.hdl02 .con07 .box .p_box ul li{ font-size: 16px; color:#999999; line-height: 24px; } #sub.hdl02 .con07 .box .txt .ct{ padding: 10px 30px; border-radius: 11px; border: 1.5px solid #3CB4E5; display: inline-block; margin-bottom: 20px; } #sub.hdl02 .con07 .box .txt .ct strong{ align-items: center; justify-content: center; display: flex; gap: 10px; font-size: 24px; color:#000000; font-weight: 600; } #sub.hdl03 .con01{ text-align: center; justify-content: center; padding-bottom: 0; } #sub.hdl03 .con01 .circle_box{ display: inline-block; padding: 20px 40px; font-size: 42px; font-weight: 400; color:#FFFFFF; background-color: #16A5EF; border-radius: 120px; } #sub.hdl03 .con01 .inner{ justify-content: center; } #sub.hdl03 .step_t{ margin-bottom: 60px; text-align: center; } #sub.hdl03 .step_t .num{ position: relative; display: flex; justify-content: center; margin-bottom: 30px; } #sub.hdl03 .step_t span{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background-color: #16A5EF; border-radius: 100px; position: relative; z-index: 1; font-size: 22px; font-weight: 600; color: #fff; } #sub.hdl03 .step_t .num:before{ content:""; display: block; width: 100px; height: 4px; border-radius: 4px; background-color: #EBF1F3; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #sub.hdl03 .step_t strong{ font-size: 32px; font-weight: 600; color:#000000; margin-bottom: 12px; display: block; line-height: 1.5em; } #sub.hdl03 .step_t p{ font-size: 20px; font-weight: 400; color:#666666; } #sub.hdl03 .con02 .wrap{ display: flex; gap: 40px; } #sub.hdl03 .con02 .wrap .txt{ width: calc(100% - 710px); display: flex; align-items: center; border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; } #sub.hdl03 .con02 .wrap .txt .wrap{ display: flex; flex-flow: column; gap: 40px; } #sub.hdl03 .con02 .wrap .img{ width: 50%; } #sub.hdl03 .con02 .wrap .img img{ border-radius: var(--border-radius); } #sub.hdl03 .con03 .box{ text-align: center; } #sub.hdl03 .con03 .box > strong{ text-align: center; justify-content: center; margin-bottom: 50px; } #sub.hdl03 .con03 .box:first-child{ padding-bottom: 120px; border-bottom: 1px solid #D9E3E8; } #sub.hdl03 .con03 .box:last-child{ padding-top: 120px; } #sub.hdl03 .box .h_table2{ display: flex; gap: 10px; } #sub.hdl03 .box .h_table2 .tb{ width: 50%; display: flex; flex-flow: column; gap: 10px; } #sub.hdl03 .box .h_table2 .tb > div{ height: 70px; display: flex; justify-content: center; align-items: center; border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; } #sub.hdl03 .box .h_table2 .tb > div > p{ font-size: 20px; color:#333333; } #sub.hdl03 .box .h_table2 .tb > div > strong{ display: none; } #sub.hdl03 .box .h_table2 .tb .h_th{ border: none; border-radius: 12px; background-color: #E4EBEF; color: #000000; font-weight: 600; font-size: 22px; } #sub.hdl03 .box .h_table2 .tb.blue .h_th{ background-color: #16A5EF; color: #fff; } #sub.hdl03 .box .h_table2 .tb > div > p.color{ color: #0077FF; font-weight: 700; } #sub.hdl03 .box .h_table2 .tb > div > p.color2{ color: #FF0000; font-weight: 700; } #sub.hdl03 .box .pb{ display: inline-block; margin-top: 50px; padding: 15px 40px; border-radius: 70px; color:#666666; background-color: #E6EDF1; } #sub.hdl03 .box .h_table3{ width: 100%; display: flex; gap:10px; } #sub.hdl03 .box .h_table3 .box2{ width: 50%; display: flex; flex-flow: column; gap: 10px; } #sub.hdl03 .box .h_table3 .box2 .th{ border-radius: 12px; border: none; background-color: #16A5EF; color: #fff; height: 70px; display: flex; flex-flow: column; align-items: center; justify-content: center; } #sub.hdl03 .box .h_table3 .box2 .th02{ background-color: #A6BDC6; } #sub.hdl03 .box .h_table3 .box2 .th strong{ font-size: 22px; font-weight: 600; color:#FFFFFF; display: block; } #sub.hdl03 .box .h_table3 .box2 .tr{ display: flex; gap: 10px; width: 100%; height: auto; } #sub.hdl03 .box .h_table3 .box2 .tr > div{ width: 50%; height: auto; } /* #sub.hdl03 .con03 .box .h_table3 .box2 .tr > div > div{ height: 70px; width: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; } #sub.hdl03 .con03 .box .h_table3 .box2 .tr > div > div > p{ font-s } */ #sub.hdl03 .con05 .box{ text-align: center; } #sub.hdl03 .con05 .box > strong{ text-align: center; justify-content: center; margin-bottom: 50px; } #sub.hdl03 .con07{ background-color: #000C2F; } #sub.hdl03 .con07 .st01{ text-align: center; justify-content: center; margin-bottom: 60px; color:#fff; } #sub.hdl03 .con07 ul{ display: flex; flex-flow: wrap; gap: 60px 20px; } #sub.hdl03 .con07 ul li{ width: calc(25% - 15px); } #sub.hdl03 .con07 ul li .info{ border-radius: var(--border-radius); padding: 30px 20px; display: flex; flex-flow: column; align-items: center; gap: 12px; text-align: center; border: 1px solid #162B67; } #sub.hdl03 .con07 ul li .info{ border-radius: var(--border-radius); padding: 30px 20px; display: flex; flex-flow: column; align-items: center; gap: 12px; text-align: center; border: 1px solid #162B67; } #sub.hdl03 .con07 ul li .info .txt{ display: flex; flex-flow: column; gap: 10px; } #sub.hdl03 .con07 ul li .info .txt strong{ display: block; font-size: 22px; font-weight: 500; color: #fff; } #sub.hdl03 .con07 ul li .info .txt p{ display: block; font-size: 16px; font-weight: 300; color: #CFD5E8; line-height: 1.5em; } #sub.hdl03 .con07 ul li .cont{ margin-top: 10px; position: relative; padding: 30px; padding-bottom: 45px; background-color: #06143D; border-radius: var(--border-radius); cursor: pointer; transition: background-color .5s; } #sub.hdl03 .con07 ul li .cont p{ font-size: 16px;line-height: 30px; color: #D7DEEF; font-weight: 300; height: 90px; overflow: hidden; transition: height .5s; } #sub.hdl03 .con07 ul li .cont svg{ position: absolute; left: 50%; bottom: 20px; transform: translate(-50%,0); transition: transform .5s; } #sub.hdl03 .con07 ul li .cont svg path{ transition: stroke .5s; } #sub.hdl03 .con07 ul li .cont.on{ background-color: #0E1F50; } #sub.hdl03 .con07 ul li .cont.on p{ height: auto; } #sub.hdl03 .con07 ul li .cont.on svg{ transform: translate(-50%,0) rotate(180deg); } #sub.hdl03 .con07 ul li .cont.on svg path{ stroke: #fff; } /* 게시판 공통 */ #sub.board .b_top{ display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #D9E3E8; margin-bottom: 20px; } #sub.board .b_top2{ justify-content: center; } #sub.board .b_top .sort{ border-radius: 80px; height: 60px; border: 1px solid #D9E3E8; padding: 10px; width: 260px; } #sub.board .b_top .sort ul{ display: flex; height: 100%; } #sub.board .b_top .sort ul li{ width: 33.33333333%; height: 100%; } #sub.board .b_top .sort ul li a{ display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 16px; font-weight: 400; color:#666666; } #sub.board .b_top .sort ul li.on a{ background-color: #3CB4E5; color: #fff; border-radius: 70px; } #sub.board .b_top .search{ display: flex; border-radius: 80px; height: 60px; background-color: #F2F6F8; width: 400px; align-items: center; position: relative; } #sub.board .b_top .search select{ width: 120px; text-align: center; font-size: 16px; font-weight: 400; color: #81929B; border: none; background: none; } #sub.board .b_top .search input{ width: calc(100% - 120px); font-size: 16px; color: #81929b; border: none; background: none; } #sub.board .b_top .search button{ position: absolute; right: 0; top: 0;} #sub.board .b_top .b_cate ul{ display: flex; gap: 10px; } #sub.board .b_top .b_cate ul li a{ padding: 0 40px; height: 60px; border-radius: 100px; background-color: #A6BDC6; color: #fff; font-size: 18px; font-weight: 500; display: flex; justify-content: center; align-items: center; } #sub.board .b_top .b_cate ul li.on a{ background-color: #0090FF; } #sub.board .img{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; transition: none; } #sub.board .img img{ transition: none; transform: scale(1); } #sub.board.re_view .thesis2 .dl02 .list .img{width: 215px; position: relative;padding-top: 19%;overflow: hidden;background: #F2F6F8} #sub.board.re_view .thesis2 .dl02 .list .img img{width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)} #sub.board .g_list ul{ display: flex; flex-flow: wrap; gap: 100px 60px; } #sub.board .g_list ul li{ width: calc(33.33333333% - 40px); } #sub.board .g_list ul li a{ display: flex; flex-flow: column; width: 100%; } #sub.board .g_list ul li .img { position: relative; padding-top: 56%;border-radius: var(--border-radius);overflow: hidden} #sub.board .g_list ul li .img img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height: 100%} #sub.board .g_list ul li .img .cate{ position: absolute; right: 10px; top: 10px; padding: 6px 20px; border-radius: 60px; display: none} #sub.board .g_list ul li .img .cate p{ font-size: 16px; color: #fff; } #sub.board .g_list ul li .img .ct01{ background-color: #3CB4E5; } #sub.board .g_list ul li .img .ct02{ background-color: #005FBE; } #sub.board .g_list ul li .img img{ border-radius: var(--border-radius); width: 100%; max-width: none; } #sub.board .g_list ul li .txt{ padding: 25px 30px; transition: border-radius .5s, background .5s, transform .5s; } #sub.board .g_list ul li .txt strong{ display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 600; color:#000000; transition: color .5s; margin-bottom: 10px; } #sub.board .g_list ul li .txt p{ font-size: 16px; color:#999999; transition: color .5s; } #sub.board .g_list ul li a:hover .txt{ border-radius: var(--border-radius); background-color: #16A5EF; } #sub.board .g_list ul li a .bt{ display: flex; gap: 15px; align-items: center; } #sub.board .g_list ul li a .bt .line{ width: 1px; height: 10px; background-color: #DDDDDD; transition: background .5s; } #sub.board .g_list ul li a:hover .txt{ transform: translateY(10px); } #sub.board .g_list ul li a:hover .txt strong{ color: #fff; } #sub.board .g_list ul li a:hover .txt p{ color: #fff; } #sub.board .g_list ul li a:hover .txt .bt .line{ background-color: #fff; } #sub.board .paging { margin-top: 60px; } #sub.board .paging ul{ display: flex; justify-content: center; gap: 10px; } #sub.board .paging ul li{ width: 42px; height: 42px; } #sub.board .paging ul li a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #666666; font-size: 16px; font-weight: 400; } #sub.board .paging ul li.on a{ background-color: #3CB4E5; color: #fff; border-radius: 50%; } #sub.board .paging ul li.first a{ background: url('/img/sub/page_first.png') center center no-repeat; } #sub.board .paging ul li.prev a{ background: url('/img/sub/page_prev.png') center center no-repeat; } #sub.board .paging ul li.next a{ background: url('/img/sub/page_next.png') center center no-repeat; } #sub.board .paging ul li.last a{ background: url('/img/sub/page_last.png') center center no-repeat; } #sub.board.vod .g_list ul li .img{ position: relative; } #sub.board.vod .g_list ul li .img:after{ content:""; display: block; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.7); transition: transform .5s, opacity .5s; opacity: 0; background: url('/img/sub/vod_play.png') center center no-repeat; } #sub.board.vod .g_list ul li a:hover .img:after{ opacity: 1; transform: translate(-50%,-50%) scale(1); } #sub.board.view .v_tit{ border: 1px solid #D9E3E8; border-radius: var(--border-radius); padding: 50px 60px; display: flex; justify-content: space-between; margin-bottom: 10px; } #sub.board.view .v_tit .left{ display: flex; flex-flow: column; gap: 20px; } #sub.board.view .v_tit .left strong{ display: block; font-size: 28px; font-weight: 600; color: #000; } #sub.board.view .v_tit .left .tab{ display: flex; gap: 10px; } #sub.board.view .v_tit .left .tab span{ padding: 0 14px; border-radius: 50px; border: 1px solid #3CB4E5; height: 31px; display: flex; align-items: center; font-size: 16px; font-weight: 600; color:#3CB4E5; } #sub.board.view .v_tit .left .bt p{ font-size: 18px; font-weight: 400; color: #999999; } #sub.board.view .v_tit .left .bt{ display: flex; align-items: center; gap: 15px; } #sub.board.view .v_tit .left .bt .line{ width: 1px; height: 10px; background-color: #DDDDDD; } #sub.board.view .recommend{ display: flex; justify-content: center; margin-top: 40px; } #sub.board.view .go_btn{ gap: 12px; } #sub.board.view .recommend a{ display: flex; align-items: center; padding: 10px; gap: 10px; border: 1px solid #74B0C8; border-radius: 100px; padding-right: 20px; transition: border .3s; } #sub.board.view .recommend a strong{ font-size: 18px; font-weight: 600; color: #74B0C8; transition: color .3s; } #sub.board.view .recommend a.ac{ border-color: #3CB4E5; } #sub.board.view .recommend a.ac strong{ color: #3CB4E5; } #sub.board.view .recommend a svg rect{ transition: fill .3s; } #sub.board.view .recommend a.ac svg rect{ fill: #3cb4e5; } #sub.board.view .reple{ margin-top: 60px; } #sub.board.view .reple > strong{ display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 500; color: #666; margin-bottom: 40px; } #sub.board.view .reple > strong > span{ display: block ;width: 26px; height: 26px; border-radius: 50px; background-color: #3CB4E5; font-size: 16px; color:#FFFFFF; display: flex; align-items: center; justify-content: center; } #sub.board.view .reple .list{ display: flex; gap: 30px; flex-flow: column; } #sub.board.view .reple .list .box .r_top{ display: flex; justify-content: space-between; margin-bottom: 10px; } #sub.board.view .reple .list .box .r_top > strong{ font-size: 18px; color: #000; font-weight: 400; displaY: flex; gap: 10px; align-items: center; } #sub.board.view .reple .list .box .r_top .right{ display: flex; align-items: center; gap: 20px; } #sub.board.view .reple .list .box .r_top .right p{ font-size: 14px; color:#999999; word-break: break-all} #sub.board.view .reple .list .box .r_top .right ul{ display: flex; gap: 6px; } #sub.board.view .reple .list .box .r_top .right ul li a{ display: flex; justify-content: center; align-items: center; width: 43px; height: 26px; font-size: 14px; border-radius: 7px; } #sub.board.view .reple .list .box .r_top .right ul .btn01 a{ border: 1px solid #8AA1AA; color: #8AA1AA; } #sub.board.view .reple .list .box .r_top .right ul .btn02 a{ background-color: #8AA1AA; color: #fff; } #sub.board.view .reple .list .box .r_con{ border-radius: 12px; background-color: #F2F6F8; padding: 18px; min-height: 96px; } #sub.board.view .reple .list .box .r_con p{ font-size: 16px; color:#81929B; } #sub.board.view .reple .r_form{ margin-top: 50px; position: relative; } #sub.board.view .reple .r_form button{ width: 100px; height: 48px; border-radius: 100px; background-color: #3CB4E5; color: #fff; font-size: 16px; position: absolute; right: 12px; bottom: 12px; } #sub.board.view .reple .r_form textarea{ width: 100%; border: 1px solid #D9E3E8; border-radius: 8px; padding: 18px; height: 140px; } #sub.board .r_list > ul{ display: flex; flex-flow: wrap; gap: 80px 62px; } #sub.board .r_list > ul > li{ width: calc(33.3333333% - 41.33333333333333px); } #sub.board .r_list > ul > li a { display: flex; flex-flow: column; gap: 20px; align-items: center; } #sub.board .r_list > ul > li a .info{ border-radius: var(--border-radius); background-color: #F2F6F8; padding: 40px; transition: background .5s; } #sub.board .r_list > ul > li a .info .profile{ width: 170px; height: 170px; margin: 0 auto; padding: 3px; border: 2px solid #B2C3CC; border-radius: 50%; margin-bottom: 24px; transition: border .5s; } #sub.board .r_list > ul > li a .info .profile img{ display: block; border-radius: 50%; } #sub.board .r_list > ul > li a .info .txt{ text-align: center; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid #CBD8DF; margin-bottom: 20px; transition: border .5s; } #sub.board .r_list > ul > li a .info .txt strong{ font-size: 24px; font-weight: 600; color:#000000; transition: color .5s; } #sub.board .r_list > ul > li a .info .txt p{ font-size: 20px; font-weight: 600; color: #666666; transition: color .5s; } #sub.board .r_list > ul > li a .info .txt em{ font-size: 16px; color: #999999; transition: color .5s; } #sub.board .r_list > ul > li a .info ul{ display:flex; flex-flow: column; gap: 10px; } #sub.board .r_list > ul > li a .info ul li{ padding-left: 12px; position: relative; font-size: 16px; line-height: 1.5em; color: #5C6970; transition: color .5s; } #sub.board .r_list > ul > li a .info ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #5c6970; position: absolute; left: 0; top: 9px; transition: background .5s; } #sub.board .r_list > ul > li a button{ width: 140px; height: 60px; font-size: 18px; font-weight: 500; color:#FFFFFF; transition: width .5s, background .5s; background-color: #3CB4E5; border-radius: 80px; } #sub.board .r_list > ul > li a:hover button{ width: 200px; background-color: #16A5EF; } #sub.board .r_list > ul > li a:hover .info{ background-color: #16A5EF; } #sub.board .r_list > ul > li a:hover .info .profile{ border-color: #fff; } #sub.board .r_list > ul > li a:hover .info .txt strong{ color: #fff; } #sub.board .r_list > ul > li a:hover .info .txt p{ color: #fff; } #sub.board .r_list > ul > li a:hover .info .txt em{ color: #BAE9FC; } #sub.board .r_list > ul > li a:hover .txt{ border-color: #66C7EF; } #sub.board .r_list > ul > li a:hover .info ul li{ color: #fff; } #sub.board .r_list > ul > li a:hover .info ul li:after{ background-color: #fff; } #sub.board .w_list ul{ display: flex; flex-flow: column; } #sub.board .w_list ul li a{ padding: 40px 30px; display: flex; border-bottom: 1px solid #D9E3E8; gap: 30px; align-items: center; transition: background .3s, border-radius .3s, border .3s; } #sub.board .w_list ul li a .txt{ width: calc(100% - 330px); display: flex; flex-flow: column; gap: 20px; } #sub.board .w_list ul li a .txt .tag{ display: flex; gap: 10px; } #sub.board .w_list ul li a .txt .tag span{ padding: 0 14px; border-radius: 50px; border: 1px solid #3CB4E5; height: 31px; display: flex; align-items: center; font-size: 16px; font-weight: 600; color:#3CB4E5; transition: border .3s, color .3s; } #sub.board .w_list ul li a .txt strong{ font-size: 20px; font-weight: 600; color:#000000; transition: color .3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sub.board .w_list ul li a .txt p{ font-size: 18px; line-height: 1.5em; color: #666666; transition: color .3s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #sub.board .w_list ul li a .txt .bt { display: flex; gap: 16px; align-items: center; } #sub.board .w_list ul li a .txt .bt p{ font-size: 16px; color:#999999; } #sub.board .w_list ul li a .txt .bt .line{ width: 1px; height: 10px; background-color: #DDDDDD; display: block; transition: background .3s; } #sub.board .w_list ul li a .img img{ border-radius: var(--border-radius); } #sub.board .w_list ul li a:hover{ background-color: #16A5EF; border-radius: var(--border-radius); border-color: rgba(255,255,255,0);} #sub.board .w_list ul li a:hover .txt .tag span{ border-color: #fff; color: #fff; } #sub.board .w_list ul li a:hover .txt strong{ color: #fff; } #sub.board .w_list ul li a:hover .txt p{ color: #fff; } #sub.board .w_list ul li a:hover .txt .bt .line{ background-color: #fff; } #sub.board .b_list table{ border-collapse: separate; border-spacing: 0 10px; width: 100%; } #sub.board .b_list table tbody tr{ cursor: pointer; } #sub.board .b_list table th{ height: 60px; background-color: #E4EBEF; text-align: center; vertical-align: middle; font-size: 18px; font-weight: 600; color:#000000; } #sub.board .b_list table th:first-child{ border-radius: 20px 0 0 20px; } #sub.board .b_list table th:last-child{ border-radius: 0 20px 20px 0; } #sub.board .b_list table td{ height: 60px; vertical-align: middle; border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; text-align: center; font-size: 16px; color: #333; } #sub.board .b_list table td.noti{ color: #3CB4E5; font-weight: 700; } #sub.board .b_list table td span{ display: none; } #sub.board .b_list table tr.answer{background: #F2F6F8;display: none} #sub.board .b_list table tr.answer td{padding: 40px;text-align: left} #sub.board .b_list table tr.answer span{display: inline} #sub.board .b_list table td b{ font-weight: 400; } #sub.board .b_list table td button{ width: 100px; height: 38px; border-radius: 50px; color: #fff; } #sub.board.schedule .b_list table td button.bt01{ background-color: #3CB4E5; } #sub.board.schedule .b_list table td button.bt02{ background-color: #A6BDC6; } #sub.board.schedule .b_list table th:nth-child(1){ width: 30%; } #sub.board.schedule .b_list table td:nth-child(1){ text-align: left; padding-left: 30px; } #sub.board.schedule .b_list table th:nth-child(3){ width: 20%; } #sub.board.schedule .b_list table th:nth-child(5){ width: 16%; } #sub.board.notice .b_list table th:nth-child(1){ width: 13%; } #sub.board.notice .b_list table th:nth-child(2){ width: 55%; } #sub.board.notice .b_list table td:nth-child(2){ text-align: left; padding-left: 30px; } .go_btn{ display: flex; justify-content: center; margin-top: 60px; } .go_btn a{ padding: 0 40px; height: 60px; display: flex; align-items: center; justify-content: center; position: relative; background-color: #0090FF;border-radius: 100px; transition: padding .5s, background .5s; } .go_btn a{ font-size: 18px; font-weight: 500; color:#FFFFFF } .go_btn a svg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition: transform .5s, left .5s, opacity .5s; } .go_btn a:hover{ padding-left: 72px; padding-right: 46px; background-color: #24B6F2; } .go_btn a:hover svg{ left: 25%; transform: translate(0,-50%); opacity: 1; } .go_btn.no_icon a:hover{ padding: 0 60px ; } .go_btn2{ justify-content: flex-end; margin-top: 20px; } .go_btn2.no_icon a:hover{ padding: 0 40px } #sub.board.view .v_con{ background-color: #F2F6F8; min-height: 400px; padding: 60px 50px; border-radius: var(--border-radius); } #sub.board.view .v_con img{ max-width: 100%; } #sub.board.view .v_con iframe{height: 800px} #sub.board.view.thesis01 .v_con{background: #fff} #sub.board.re_view .con01{ padding: 60px 0; } #sub.board.re_view .con01 .profile{ width: 170px; height: 170px; margin: 0 auto; padding: 3px; border: 2px solid #B2C3CC; border-radius: 50%; margin-bottom: 24px; transition: border .5s; } #sub.board.re_view .con01 .profile img{ display: block; border-radius: 50%; } #sub.board.re_view .con01 .txt{ text-align: center; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 10px; } #sub.board.re_view .con01 .txt strong{ font-size: 24px; font-weight: 600; color:#000000; } #sub.board.re_view .con01 .txt em{ font-size: 16px; color: #999999; } #sub.board.re_view .con02 .st01{ text-align: center; margin-bottom: 55px; } #sub.board.re_view .con02 .con_box{ border: 1px solid #D9E3E8; border-radius: var(--border-radius); padding: 50px; } #sub.board.re_view .con02 .con_box p{ text-align: center; } #sub.board.re_view .career{ display: flex; flex-flow: wrap; gap: 100px 60px; } #sub.board.re_view .thesis{ display: flex; flex-flow: wrap; gap: 100px 60px; } #sub.board.re_view dl{ width: calc(50% - 30px); } #sub.board.re_view dl > dt{ font-size: 24px; font-weight: 700; color:#000000; padding-bottom: 20px; border-bottom: 1px solid #D9E3E8; position: relative; margin-bottom: 20px; } #sub.board.re_view dl > dt:after{ content:""; width: 41px; height: 3px; background-color: #3CB4E5; position :absolute; left: 0; bottom: -2px; } #sub.board.re_view .career > dl > dd > ul{ margin-left: 10px; display: flex; flex-flow: column; gap: 14px; } #sub.board.re_view .career > dl > dd > ul > li{ font-size: 18px; line-height: 1.5em; color:#333333; position: relative; padding-left: 12px; } #sub.board.re_view .career > dl > dd > ul > li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top: 12px; background-color: #999999; } #sub.board.re_view .dl02{ width: 100%; } #sub.board.re_view .career > .dl02 > dt{ margin-bottom: 30px; } #sub.board.re_view .career > .dl02 > dd > .g_list > ul{ gap: 100px 40px; } #sub.board.re_view .career > .dl02 > dd > .g_list > ul > li{ width: calc(25% - 30px); } #sub.board.re_view .career > .dl02 > dd > .g_list > ul > li .img img{ border-radius: 10px; } #sub.board.re_view .g_list ul li .img:after{ width: 60px; height: 60px; background-size: 100% 100%; } #sub.board.re_view .g_list ul li .txt{ padding: 0 !important; background-color: transparent !important; margin-top: 16px; transform: translateY(0) !important;} #sub.board.re_view .g_list ul li .txt strong{ color: #000000 !important; font-size: 18px; margin-bottom: 0; } #sub.board.re_view .thesis1{ margin-bottom: 80px; } #sub.board.re_view .thesis2 .dl02 dt{ margin-bottom: 0px; } #sub.board.re_view .thesis2 .dl02 .list{ display: flex; align-items: center; padding: 40px 0; border-bottom: 1px solid #D9E3E8; gap: 60px; } #sub.board.re_view .thesis2 .dl02 .list .txt{ display:flex; flex-flow: column; gap: 20px; } #sub.board.re_view .thesis2 .dl02 .list .txt strong{ font-size: 22px; line-height: 1.5em; color: #000000; font-weight: 600; } #sub.board.re_view .thesis2 .dl02 .list .txt p{ font-size: 18px; line-height: 1.5em; color: #666666; font-weight: 400; } #sub.board.rev03 .con02 table { border-collapse: separate; border-spacing: 10px 0; width: 100%; } #sub.board.rev03 .con02 table th{ height: 60px; border-radius: 12px; background-color: #F2F6F8; text-align: left; padding-left: 30px; font-weight: 600; color:#000000; font-size: 18px; vertical-align: middle; } #sub.board.rev03 .con02 table th:nth-child(2){ width: 55% } #sub.board.rev03 .con02 table th:nth-child(1){ width: 15%; } #sub.board.rev03 .con02 table td{ height: 60px; border-bottom: 1px solid #D9E3E8; vertical-align: middle; padding-left: 30px; padding-right: 10px; font-size: 18px; font-weight: 400; color:#666666; } #sub.board.rev03 .con02 table td strong{ display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 400; color:#666666; } .sub_pop{ position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(0,0,0,0.1); backdrop-filter: blur(20px); display: none; } .sub_pop .wrap{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .sub_pop .wrap > div{ position: relative; } .sub_pop .wrap .close_b{ position: absolute; right: -20px; top: 0; transform: translateX(100%); } .d_pop .wrap .box{ overflow-y: scroll; } .sub_pop .box{ width: 1026px; border-radius: var(--border-radius); background-color: #fff; position: relative; } .sub_pop .box .v_wrap{ position: relative; height: 0; padding-bottom: 56.25%; } .sub_pop .box .v_wrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px 20px 0 0; } .sub_pop .box .txt{ padding: 40px 50px; } .sub_pop .box .txt .cate{ display: inline-block; padding: 6px 20px; border-radius: 60px; margin-bottom: 10px; } .sub_pop .box .txt .cate p{ font-size: 16px; color: #fff; } .sub_pop .box .txt .ct01{ background-color: #3CB4E5; } .sub_pop .box .txt .ct02{ background-color: #005FBE; } .sub_pop .box .txt strong{ display: block; font-size: 22px; font-weight: 600; color:#000000; } .sub_pop2{ display: none; } .sub_pop2 .box{ width: 574px; } .sub_pop2 .box .img img{ border-radius: 20px 20px 0 0; max-width: 100%; display: block; } .sub_pop2 .box form{ display: flex; flex-flow: column; gap: 20px; } .sub_pop2 .box form dl{ display: flex; align-items: center; gap: 20px; } .sub_pop2 .box form dl dt{ width: 100px; font-size: 18px; color:#333333; font-weight: 500; } .sub_pop2 .box form dl dt span{ color: #3CB4E5; } .sub_pop2 .box form dl dd{ width: calc(100% - 120px); } .sub_pop2 .box form dl dd input[type="text"]{ height: 48px; width: 100%; border: none; border-radius: 12px; padding-left: 20px; background-color: #F1F3F5; font-size: 16px; color: #333; } .sub_pop2 .box form dl dd ul{ display: flex; padding-left: 20px; width: 100%; } .sub_pop2 .box form dl dd ul li{ width: 50%; position: relative; display: flex; align-items: center; gap: 8px; position: relative; font-size: 16px; color:#4E5760; font-weight: 500; } .sub_pop2 .box form dl dd ul li input{ width: 22px; height: 22px; position: relative; z-index: 1; } .sub_pop2 .box form dl dd ul li input:after{ content:""; display: block; width: 22px; height: 22px; background: url('/img/sub/CHK.jpg') center center no-repeat; position: absolute; left: 0; top: 0; } .sub_pop2 .box form dl dd ul li input:checked:after{ background: url('/img/sub/chk_on.png') center center no-repeat; } .sub_pop2 .box form dl dd .gen{ flex-flow: nowrap; } .sub_pop2 .box form dl dd .gen li{ padding-left: 0; } .sub_pop2 .box form dl dd .gen li:after{ display: none; } .sub_pop2 .box form dl dd textarea{ height: 150px; width: 100%; border: none; border-radius: 12px; padding: 14px 20px; background-color: #F1F3F5; font-size: 16px; color: #333; } .sub_pop2 .box form dl:last-child{ align-items: flex-start; } .sub_pop2 .box form dl:last-child dt{ padding-top: 14px; } .sub_pop2 .box .pop_btn a{ width: 100%; display: block; height: 60px; border-radius: 0 0 20px 20px; background-color: #3CB4E5; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color:#FFFFFF; } .cal_pop{ display: none; } .cal_pop .box{ width: 574px; padding: 40px 45px; display: flex; flex-flow: column; gap: 40px; } .cal_pop .box .wrap2 > strong{ display: block; font-size: 22px; font-weight: 500; color:#333333; padding-bottom: 16px; border-bottom: 1px solid #E3E4EB; margin-bottom: 20px; } .cal_pop .box .wrap2 .graph { margin-bottom: 20px; } .cal_pop .box .wrap2 .graph .wraps{ aspect-ratio: 2 / 1; overflow: hidden; position: relative; } .cal_pop .box .wrap2 .graph .wraps .arrow{ position: absolute; left: 50%; top: 0; transform: translate(-50%,0); } .cal_pop .box .wrap2 .graph .wraps .arrow img{ max-width: none; } .cal_pop .box .wrap2 .graph img{ display: block; margin: 0 auto; max-width: 100%; } .cal_pop .box .wrap2 .graph > strong{ font-size: 22px; line-height: 32px; color:#333333; font-weight: 500; text-align: center; display: block; margin-top: 10px; } .cal_pop .box .wrap2 .graph .state02{ color: #FFAA00; } .cal_pop .box .wrap2 .graph .state01{ color: #50AA6B; } .cal_pop .box .wrap2 .graph .state03{ color: #E6492A; } .cal_pop .box .wrap2 .p_box{ padding: 17px 10px; border-radius: 12px; background-color: #F2F6F8; text-align: center; } .cal_pop .box .wrap2 .p_box p{ font-size: 18px; line-height: 1.5em; color: #333333; } .cal_pop .box .wrap2 .p_box p b{ font-weight: 600; color:#3C748B; } .cal_pop .box .wrap2 .bar{ position: relative; margin-top: 20px; } .cal_pop .box .wrap2 .bar .loca{ position: absolute; left: 50%; top: 0;} .cal_pop .box .wrap2 .bar svg{ width: 100%; height: auto; } .cal_pop .percent{ text-align: center; margin-top: 30px; } .cal_pop .percent p{ line-height: 1em; margin-bottom: 10px; font-size: 22px; font-weight: 500; color: #333; } .cal_pop .percent strong{ font-size: 60px; font-weight: 600; color:#333333; } .cal_pop .state{ margin-top: 20px; text-align: center; display: flex; justify-content: center; align-items: center; height: 44px; border-radius: 12px; margin-bottom: 16px; } .cal_pop .state strong{ color: #fff; font-size: 18px; font-weight: 600; color:#FFFFFF; } .cal_pop .state.state01{ background-color: #50AA6B; } .cal_pop .state.state02{ background-color: #FFAA00; } .cal_pop .state.state03{ background-color: #E6492A; } .cal_pop .p04{ font-size: 18px; color:#333333; font-weight: 500; text-align: center; } .cal_pop .wrap2 > svg{ width: 100%; height: auto; } .sub_pop.info_s .box{ width: 574px; height: 664px; padding: 40px 45px; } .sub_pop .box .p_tit{ padding-bottom: 16px; border-bottom: 1px solid #D9E3E8; margin-bottom: 30px; } .sub_pop .box .p_tit strong{ display: block; font-size: 22px; font-weight: 600; color:#000000; } .sub_pop .box ul{ display: flex; flex-flow: column; gap: 10px; } .sub_pop .box ul li{ font-size: 16px; line-height: 28px; color: #333333; position: relative; padding-left: 12px; } .sub_pop .box ul li:after{ content:"-"; display: block; font-size: 16px; color: #333; position: absolute; left: 0; top: 0px; } .product_info .box{ width: 600px; padding: 50px; } .product_info .box .p_tit img{ display: block; margin: 0 auto; border-radius: 10px; width :200px; margin-bottom: 20px; } .product_info .box .p_tit strong{ text-align: center; line-height: 1.5em; } .product_info .box dl dt{ font-size: 18px; line-height: 30px; color:#333333; } .product_info .box dl dd{ font-size: 18px; line-height: 30px; color:#333333; word-break: keep-all; } .product_info .box dl dd ul li{ font-size: 18px; line-height: 30px; margin-bottom: 0; } .product_info .box dl dd ul { gap: 0; } .product_info .box .go_btn{ margin-top: 30px; } .product_info .box .go_btn a{ width: 280px; padding: 0 !important; } .p_state .box{ padding: 50px; width: 600px; } .p_state .box .s_t{ display: flex; align-items: center; flex-flow: column; gap: 40px; padding-bottom: 30px; border-bottom: 1px solid #DDDDDD; } .p_state .box .s_t strong{ font-size: 32px; font-weight: 600; color:#333333; } .p_state .box .s_t p{ font-size: 18px; font-weight: 600; color:#333333; text-align: center; } .p_state .box .s_t p b{ color:#16A5EF; } .p_state .box .go_btn{ margin-top: 30px; gap: 20px; display: flex; } .p_state .box .go_btn a{ width: 200px; padding: 0 !important; } .p_state .box .go_btn .line_b{ border: 2px solid #16A5EF; color: #16A5EF; font-weight: 600; background-color: transparent; transition: opacity .3s; } .p_state .box .go_btn .line_b:hover{ opacity: .6; } .state02 .box .s_t { gap: 20px; } .state02 .box .s_t svg{ margin-bottom: 20px; } .state02 .box .s_t p{ font-size: 16px; line-height: 27px; color:#666666; text-align: center; font-weight: 400; } .chk_point .box{ width: 500px; padding:50px; display: flex; flex-flow: column; align-items: center; text-align: center; gap: 20px; } .chk_point .box > strong{ font-size: 24px; font-weight: 600; color: #000000; } .chk_point .box .p_box{ padding: 20px 0; border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; width: 100%; font-size: 18px; line-height: 1.5em; color:#666666; } .chk_point .box .p_info{ font-size: 16px ; color: #FF4444; } .chk_point .box .go_btn{ margin-top: 0; } .ok .box{ width: 500px; padding:50px; display: flex; flex-flow: column; align-items: center; text-align: center; gap: 20px; display: flex; flex-flow: column; gap: 30px; align-items: center; text-align: center; } .ok .box strong{ font-size: 24px; font-weight: 600; color: #000; } .ok .box .go_btn{ margin-top: 0; } /* 연구소 */ #sub.center .con01{ padding: 80px 0; background-color: #F2F6F8; margin-top: 25px; } #sub.center .con01 .inner{ } #sub.center .con01 .inner .st02{ justify-content: center; margin-top: 20px; } #sub.center .con01 .inner p{ display:inline-block; padding: 14px 40px; border-radius: 70px; background-color: #E6EDF1; font-size: 20px; font-weight: 500; color:#333333; margin-top: 20px; } #sub.center .con02 .inner{ display: flex; gap: 60px; } #sub.center .con02 .inner > .img img{ border-radius: var(--border-radius); } #sub.center .con02 .inner > .txt{ border-radius: var(--border-radius); width: calc(100% - 520px);padding: 53px 60px; text-align: left; display: flex; flex-flow: column; gap: 30px; border: 1px solid #D9E3E8; } #sub.center .con03 ul{ display: flex; flex-flow: wrap; gap: 60px 135px; } #sub.center .con03 ul li{ width: calc(25% - 101.25px); } #sub.center .con03 ul li .img img{ border-radius: 10px; border: 1px solid #D9E3E8; } #sub.center .con03 ul li .txt{ margin-top: 20px; text-align: center; } #sub.center .con03 ul li .txt p{ font-size: 16px; line-height: 1.5em; color: #666666; word-break: keep-all; } #sub.center .con04 .wrap{ display: flex; flex-flow: column; gap: 20px; } #sub.center .con04 .box > button{ height: 80px; border-radius: 10px; background-color: #F2F6F8; display: flex; align-items: center; padding: 0 20px; width: 100%; } #sub.center .con04 .box > button svg{ margin-right: 20px; } #sub.center .con04 .box > button strong{ font-size: 20px; font-weight: 600; color:#000000; } #sub.center .con04 .box > button strong b{ color: #3CB4E5; } #sub.center .con04 .box ul{ display: none; } #sub.center .con04 .box.ac ul{ display: block; } #sub.center .con04 .box ul li{ padding: 28px 0; display: flex; gap: 30px; align-items: center; border-bottom: 1px solid #D9E3E8} #sub.center .con04 .box ul li .img{ width: 230px; } #sub.center .con04 .box ul li .txt{ width: calc(100% - 260px); text-align: left; } #sub.center .con04 .box ul li .txt p{ font-size: 18px; color:#666666; line-height: 32px; } #sub.center .con04 .box > button.on{ background-color: #16A5EF; } #sub.center .con04 .box > button.on strong{ color: #fff; } #sub.center .con04 .box > button.on b{ color: #fff; } #sub.center .con04 .box > button.on svg circle{ fill: #fff; } #sub.center .con04 .box > button.on svg path{ stroke: #3CB4E5; } #sub.center02 .con02 .inner > .txt{ gap: 22px; } #sub.center .con02 .inner > .txt ul{ display: flex; gap: 8px; flex-flow: column; } #sub.center .con02 .inner > .txt ul li{ padding-left: 12px; font-size: 18px; color:#333333; font-weight: 400; line-height: 1.5em; position: relative; } #sub.center .con02 .inner > .txt ul li:after{ position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background-color: #999999; content:""; display: block; } #sub.center .c_box{ border-radius: var(--border-radius); padding: 35px 40px; background-color: #F2F6F8; } #sub.center .c_box strong{ font-size: 22px; display: block; font-weight: 600; color: #000; margin-bottom: 10px; } #sub.center03 .con03 .img img{ border-radius: var(--border-radius); border: 1px solid #D9E3E8; } #sub.sympo .con01 .img { margin-top: 30px; } #sub.sympo .con01 .img a{ display: flex; justify-content: center; } #sub.sympo .con01 .img a img{ border-radius: var(--border-radius); width: 100%; display: block; } @keyframes lipo{ 0%{ transform: translateY(0); } 50%{ transform: translateY(10px); } 100%{ transform: translateY(0); } } /* 오시는길 */ #sub.direction .con01 { padding-top: 120px; } #sub.direction .con01 .m_map{ width: 100%; height: 500px; border-radius: var(--border-radius); border: 2px solid #3CB4E5; box-shadow: 20px 20px 40px rgba(0,0,0,0.05); overflow: hidden; } #sub.direction .con01 .m_map .root_daum_roughmap{ width: 100%; height: 100%; } #sub.direction .con01 .m_map .root_daum_roughmap .wrap_map{ width: 100%; height: 100%; } #sub.direction .con01 { padding-bottom: 0; } #sub.direction .con02{ padding-top: 60px; } #sub.direction .con02 .inner{ display: flex; gap: 40px; } #sub.direction .con02 .txt{ width: calc(100% - 706px); display: flex; align-items: center; padding: 0 40px; flex-flow: column; justify-content: center; gap: 30px; border: 1px solid #D9E3E8; border-radius: var(--border-radius); } #sub.direction .con02 .txt .box svg{ margin-bottom: 14px; } #sub.direction .con02 .txt .box p{ font-size: 20px; color:#333333; padding-left: 19px; } #sub.direction .con02 .txt .box ul{ display: flex; flex-flow: column; gap: 7px; } #sub.direction .con02 .txt .box ul li{ font-size: 18px; line-height: 1.5em; color:#333333; } #sub.direction .con02 .txt > .box{ width: 100%; padding-bottom: 30px; border-bottom: 1px solid #D9E3E8; } #sub.direction .con02 .txt .wrap{ display: flex; width: 100%; gap: 24px; } #sub.direction .con02 .txt .wrap > .box{ width: calc(50% - 12px); } #sub.direction .con03{ padding: 80px 0; text-align: center; } #sub.direction .con03 p{ font-size: 24px; color:#3CB4E5; margin-bottom: 20px; } #sub.direction .con03 strong{ font-size: 40px; font-weight: 700; color:#000000; text-shadow: 0 0 20px rgba(255,255,255,0.5);} #sub.board .f_box{ display: flex; align-items: center; } #sub.board .f_box > strong{ width: 123px; line-height: 21px; font-size: 18px; color: #000000; font-weight: 500; } #sub .chk_box{ display: flex; padding-left: 20px; width: 100%; } #sub .chk_box > div{ width: 50%; position: relative; display: flex; align-items: center; gap: 8px; position: relative; font-size: 16px; color:#4E5760; font-weight: 500; height: 48px; } #sub .chk_box > div input{ width: 22px; height: 22px; position: relative; z-index: 1; } #sub .chk_box > div input:after{ content:""; display: block; width: 22px; height: 22px; background: url('/img/sub/CHK.jpg') center center no-repeat; position: absolute; left: 0; top: 0; border-radius: 4px; } #sub .chk_box > div input:checked:after{ background: url('/img/sub/chk_on.jpg') center center no-repeat; } #sub .in_box{ height:60px; width: 100%; border-radius: 100px; border: 1px solid #D9E3E8; background-color: #fff; padding-left: 30px; font-size: 18px; color:#333; position: relative; } #sub .in_box:focus{ border-color: #3CB4E5;} #sub.board .text_box{ width: calc(100% - 123px); border-radius: 20px; border: 1px solid #D9E3E8; background-color: #fff; padding: 30px; font-size: 18px; color:#333;height: 360px; } #sub .in_box:after{ content:""; display: block; position: absolute; right: 0; top: 0; width: 40px; height: 40px; background-color: #000; } #sub.board .f_box .small{ height: 48px; padding-left: 20px; font-size: 16px; } #sub.board .f_box{ position: relative; } #sub.board .f_box.right:after{ content:"mg/dL"; display: block; font-size: 16px; color:#999999; position: absolute; right: 17px; top: 50%; transform: translate(0,-50%); } #sub.calculator .con01 .inner{ display: flex; gap: 120px; position: relative; } #sub.calculator .con01 .inner:after{ content:""; display: block; width: 1px; height: 100%; position: absolute; left: 50%; top: 0; background-color: #D9E3E8; } #sub.calculator .con01 form{ width: calc(50% - 60px); } #sub.calculator .con01 form .top{ display: flex; flex-flow: column; gap: 16px; align-items: center; } #sub.calculator .con01 form .top dl{ display: flex; padding: 10px; border-radius: 50px; border: 1px solid #CBD8DF; align-items: center; padding-right: 30px; gap: 14px; } #sub.calculator .con01 form .top dl dd{ font-size: 24px; color:#000000; font-weight: 600; } #sub.calculator .con01 form .top dt{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 500; color:#FFFFFF; background-color: #16A5EF; border-radius: 50%; } #sub.calculator .con01 form .top p{ line-height: 32px; min-height: 64px; } #sub.calculator .con01 form .box{ margin-top: 25px; background-color: #F2F6F8; border-radius: var(--border-radius); padding: 50px 60px; } #sub.calculator .con01 form .box ul{ display: flex; flex-flow: column; gap: 20px; } #sub.calculator .con01 form .box .go_btn{ margin-top: 30px; } #sub.calculator .con02 .inner{ display: flex; align-items: center; flex-flow: column; } #sub.calculator .con02 .inner > svg{ margin-bottom: 15px; } #sub.calculator .con02 .inner > strong{ font-size: 20px; font-weight: 600; color:#000000; } #sub.calculator .con02 ul{ margin-top: 35px; display: flex; gap: 50px; width: 100%; } #sub.calculator .con02 ul li{ width:33.33333333%; } #sub.calculator .con02 ul li svg{ display: block; margin: 0 auto; filter: drop-shadow(0 0 20px rgba(0,39,88,0.1)); } #sub.calculator .con02 ul li .box{ border-radius: var(--border-radius); border: 1px solid #CBD8DF; background-color: #fff; padding: 50px 20px; padding-top: 75px; text-align: center; margin-top: -42px; } #sub.calculator .con02 ul li .box strong{ font-size: 22px; color:#000000; font-weight: 600; } #sub.calculator .con02 ul li .box .go_btn{ margin-top: 23px; box} /* 깨달음퀴즈 */ #sub.ox .sub_nav .sub_n li a{ width: 100px; } #sub.ox .con01 .inner{ text-align: center; } #sub.ox .con01 .inner > span{ margin: 0 auto; display: flex; width: 60px; height: 60px; align-items: center; justify-content: center; background-color: #3CB4E5; color: #Fff; font-size: 20px; font-weight: 500; color:#FFFFFF; border-radius: 50%; margin-bottom: 20px; } #sub.ox .con01 .inner > strong{ font-size: 30px; font-weight: 600; color:#000000; margin-bottom: 40px; display: block; } #sub.ox .con01 .img img{ display: block; max-width: 100%; margin: 0 auto; width: auto; } #sub.ox .con01 .btn{ display: flex; gap: 40px; justify-content: center; margin-top: 40px; } #sub.ox .con01 .btn button{ transition: opacity .3s; } #sub.ox .con01 .btn button:hover{ opacity: .6; } #sub.ox .sub_nav .sub_n li{ width: auto; } .ox_pop .box{ width: auto; padding: 0; } .ox_pop .st svg{ display: block; margin: 0 auto; margin-bottom: 15px; } .ox_pop .st strong{ font-size: 32px; font-weight: 500; color:#333333; display: block; text-align: center } .ox_pop .st .p_box{ border-radius: 12px; padding: 20px; background-color: #F1F3F5; min-height: 155px; margin-top: 35px; } .ox_pop .st .p_box p{ font-size: 16px; color:#6A6A6A; font-weight: 500; line-height: 1.5em; } .ox_pop02 .box{ height: auto; padding: 0; display: flex; flex-flow: column; align-items: center; justify-content: center; } /* faq */ #sub.faq .f_list ul{ display: flex; flex-flow: column; gap: 10px; } #sub.faq .f_list ul li{ cursor: pointer; background-color: #F2F6F8; border: 2px solid rgba(255,255,255,0); border-radius: var(--border-radius); padding: 0 50px; transition: border .3s, background .3s; } #sub.faq .f_list ul li .title{ display: flex; align-items: center; height: 90px; position: relative; } #sub.faq .f_list ul li .title span{ display: block; font-size: 16px; width :147px; font-weight: 500; color: #3CB4E5; } #sub.faq .f_list ul li .title strong{ font-size: 20px; font-weight: 500; color:#000000; } #sub.faq .f_list ul li .title svg{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); transition: transform .3s; } #sub.faq .f_list ul li .title svg circle{ transition: fill .3s; } #sub.faq .f_list ul li .answer{ padding-top: 31px; padding-bottom: 38px; border-top: 1px solid #D9E3E8; display: none; } #sub.faq .f_list ul li .answer p{ font-size: 20px; line-height: 1.5em; color: #333333; } #sub.faq .f_list ul li.on{ border-color: #3CB4E5; background-color: #fff; } #sub.faq .f_list ul li.on svg{ transform: translate(0,-50%) rotate(180deg); } #sub.faq .f_list ul li.on svg circle{ fill: #3CB4E5; } #sub.faq .f_list ul li.on .answer{ display: block; } #sub.contact form{ display: flex; flex-flow: wrap; gap: 32px 40px; } #sub.contact form .f_box p{ font-size: 18px; color:#666666; } #sub.contact form .f_box{ width: calc(50% - 20px); } #sub.contact form .f_in{ width: 100%; } #sub.contact form .f_box .in_box{ width: calc(100% - 123px); } #sub.contact .dot_li{ margin-top: 40px; display: flex; flex-flow: column; gap: 12px; margin-left: 115px; } #sub.contact .dot_li li{ position: relative; padding-left: 12px; font-size: 18px; color: #666; line-height: 1.5em; word-break: keep-all; } #sub.contact .dot_li li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #666; position: absolute; left: 0; top: 12px; } #sub .per{ display: flex; justify-content: center; width: auto; width: 100%; margin-top: 30px; } #sub .per .chk_box{ width: auto; padding-left: 0; } #sub .per .chk_box > div{ width: 100%; height: auto; } #sub .per .chk_box label{ font-size: 16px; color: #000; } #sub .nb_box{ border-radius: var(--border-radius); border:1px solid #D9E3E8; background-color: #fff; padding: 60px; display: flex; flex-flow: column; gap: 50px; } #sub .nb_box .n_title > p{ margin-top: 25px; } #sub .number_t{ display:flex; align-items: flex-start; flex-flow: column; } #sub .number_t > div{ border: 1px solid #CBD8DF; border-radius: 70px; gap: 14px; padding: 10px; padding-right: 30px; display: flex; align-items: center; } #sub .number_t span{ display: flex; font-size: 20px; font-weight: 500; color:#FFFFFF; width: 50px; height: 50px; background-color: #16A5EF; border-radius: 50%; justify-content: center; align-items: center; } #sub .number_t strong{ font-size: 24px; font-weight: 600; color: #000; } #smart_editor2{ width: 100% !important; } /* 멤버십 */ #sub.membership .con01{ padding-top: 120px; } #sub.intro .con01 .inner{ text-align: center; display: flex; flex-flow: column; gap: 40px; align-items: center; } #sub.intro .con01 p{ font-size: 20px; line-height: 2em; color:#333333; } #sub.intro .con01 p b{ color: #000; } #sub.intro .con02 .inner{ display: flex; flex-flow: column; gap: 60px; } #sub.intro .con02 .nb_box .grade{ display: flex; justify-content: center; gap: 80px; } #sub.intro .con02 .nb_box .grade li{ display: flex; flex-flow: column; align-items: center; gap: 16px; } #sub.intro .con02 .nb_box .grade li .txt p{ font-size: 22px; line-height: 32px; color:#333333; text-align: center; } #sub.intro .con02 .benefits{ border-collapse: separate; border-spacing: 10px; width: 100%; } #sub.intro .con02 .benefits th{ height: 60px; border-radius: var(--border-radius); vertical-align: middle; font-size: 18px; font-weight: 500; color: #FFFFFF; } #sub.intro .con02 .benefits th:nth-child(1){ background-color: #16A5EF; } #sub.intro .con02 .benefits th:nth-child(2){ background-color: #2083B7; } #sub.intro .con02 .benefits th:nth-child(3){ background-color: #7FBAD9; } #sub.intro .con02 .benefits th:nth-child(4){ background-color: #B2C3CC; } #sub.intro .con02 .benefits td{ border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; height: 170px; text-align: center; font-size: 18px; color:#666666; vertical-align: middle; } #sub.intro .con02 svg{ max-width: 100%; margin: 0 auto; height: auto; display :block; } #sub.mypage .con01 .inner > strong{ text-align: center; margin-bottom: 60px; } #sub.mypage .con01 .dash{ border-radius: var(--border-radius); background-color: #F2F6F8; padding: 40px 60px; display: flex; } #sub.mypage .con01 .dash > div{ border-right: 1px solid #CBD8DF; } #sub .gt{ font-size: 18px; font-weight: 500; color:#000000; display: block; } #sub.mypage .con01 .dash .grade{ width: 50%; } #sub.mypage .con01 .dash .point{ width: 25%; padding-left: 40px; } #sub.mypage .con01 .dash .coupon{ width: 25%; padding-left: 40px; border-right: none; } #sub.mypage .con01 .g_con{ margin-top: 25px; height: 72px; display: flex; gap: 20px; align-items: center; } #sub.mypage .con01 .grade .g_con > img{ height: 100%; display: block; } #sub.mypage .con01 .grade .g_con p{ font-size: 20px; font-weight: 400; color:#000000; } #sub.mypage .con01 .grade .points{ display: block; padding: 7px 21px; border-radius: 50px; border: 1px solid #D9E3E8; background-color: #fff; } #sub.mypage .con01 .dash .g_con strong{ font-size: 32px; font-weight: 600; color:#16A5EF; } #sub.mypage .con01 .code{ border-radius: var(--border-radius); border: 2px solid #D9E3E8; height: 80px; display: flex; align-items: center; gap: 60px; padding: 0 60px; margin-top: 20px; } #sub.mypage .con01 .code dl{ width: 50%; display: flex; align-items: center; justify-content: space-between; } #sub.mypage .con01 .code dl dt{ font-size: 18px; font-weight: 500; color:#000000; } #sub.mypage .con01 .code dl dd{ display: flex; align-items: center; gap:20px; } #sub.mypage .con01 .code dl dd p{ font-size: 18px; font-weight: 300; color: #666666; } #sub.mypage .con01 .code dl dd button{ border-radius: 50px;height: 38px; width: 100px; background-color: #16A5EF; color: #fff; font-size: 16px; font-weight: 500; transition: opacity .3s; } #sub.mypage .con01 .code dl dd button:hover{ opacity: .6; } #sub.mypage.score .con01 .dash .grade{ width: 40%; } #sub.mypage.score .con01 .dash .grade .g_con .txt > p{ font-size: 16px; color:#666666; font-weight: 400; } #sub.mypage.score .con01 .dash .grade .g_con .txt > strong{ font-size: 22px; font-weight: 600; color:#000000; margin-top: 5px; display: block; } #sub.mypage.score .con01 .dash .point{ width: 60%; border-right: none; } #sub.mypage.score .con01 .dash .point .points{ display: block; padding: 7px 21px; border-radius: 50px; border: 1px solid #D9E3E8; background-color: #fff; } #sub.mypage.score .con01 .dash .point .g_con p{ font-size: 14px; color: #999999; } #sub.mypage.score .con03 .st03{ font-size: 32px; position: relative; } #sub.mypage.score .con03 .st03 a{ position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 300; color:#999999; } #sub.mypage.score .con03 .inner{ display: flex; flex-flow: column; gap: 10px; } #sub.mypage.score .con03 .cate{ display:flex; align-items: center; padding: 0 60px; height: 80px; border-radius: var(--border-radius); border:2px solid #CBD8DF;} #sub.mypage.score .con03 .cate p{ font-size: 20px; font-weight: 500; color: #000; width: 100px; } #sub.mypage.score .con03 .cate ul{ display:flex; gap: 10px; width: calc(100% - 100px); } #sub.mypage.score .con03 .cate ul li a{ width: 100px; height: 38px; border-radius: 50px; color:#666666; display: flex; align-items: center; justify-content: center; } #sub.mypage.score .con03 .cate ul li.on a{ background-color: #16A5EF; color :#fff; font-weight: 500; } #sub.mypage.score .con03 .inner > ul{ display: flex; gap: 10px; flex-flow: column; } #sub.mypage.score .con03 .inner > ul > li{ height: 100px; border-radius: var(--border-radius); align-items: center; justify-content: space-between; display: flex; background-color: #F2F6F8; padding: 0 60px; } #sub.mypage.score .con03 .inner > ul > li .p_wrap{ display: flex; gap: 60px; } #sub.mypage.score .con03 .inner > ul > li .p_wrap p{ font-size: 18px; color: #333333; } #sub.mypage.score .con03 .inner > ul > li .p_wrap .date{ color: #999999; } #sub.mypage.score .con03 .inner > ul > li .color2{ color: #FF0000; } #sub.mypage.score .con03 .inner > ul > li .color1{ color: #0080FF; } #sub.mypage.score .con03 .inner > ul > li strong{ font-size: 24px; font-weight: 600; } #sub.mypage .con02 ul{ display: flex; gap: 20px; } #sub.mypage .con02 ul li{ width: 25%; } #sub.mypage .con02 ul li a{ display: flex; align-items: center; padding: 0 40px; border-radius: var(--border-radius); background-color: #fff; border: 1px solid #D9E3E8; height: 140px; position: relative; width: 100%; gap: 16px; transition: background .3s, border .3s; } #sub.mypage .con02 ul li a .arrow{ position: absolute; right: 40px; top: 50%; transform: translate(0,-50%); } #sub.mypage .con02 ul li a .arrow svg path{ transition: stroke .3s; } #sub.mypage .con02 ul li a strong{ font-size: 20px; font-weight: 600; color:#000000; transition: color .3s; } #sub.mypage .con02 ul li a .icon svg circle{ transition: fill .3s; } #sub.mypage .con02 ul li a:hover{ background-color: #16A5EF; border-color :#16A5EF; } #sub.mypage .con02 ul li a:hover strong{ color: #fff; } #sub.mypage .con02 ul li a:hover .arrow svg path{ stroke: #fff; } #sub.mypage .con02 ul li a:hover .icon svg circle{ fill: #0083C6; } #sub.mypage .edit_b{ width: 700px; border-radius: var(--border-radius); background-color: #F2F6F8; padding: 50px; padding-bottom: 60px; margin: 0 auto; } #sub.mypage .edit_b ul{ display: flex; flex-flow: column; gap: 10px; } #sub.mypage .edit_b ul li{ display: flex; align-items: center; } #sub.mypage .edit_b ul li strong{ font-size: 18px; font-weight: 500; width: 180px; } #sub.mypage .edit_b ul li .inp_w{ width: calc(100% - 180px); height: 60px; display: flex; align-items: center; gap: 8px; } #sub.mypage .edit_b ul li p{ padding-left: 20px; font-size: 16px; color:#666666; } #sub.mypage .edit_b ul li .bt .in_box{ width: calc(100% - 120px); } #sub.mypage .edit_b ul li .bt button{ height: 100%; width: 112px; border-radius: 70px; color: #fff; font-size: 16px; font-weight: 600; color:#FFFFFF; background-color: #93B9C8; transition: opacity .3s; } #sub.mypage .edit_b ul li .bt button:hover{ opacity: .6; } #sub.mypage .edit_b ul li .bt p{ width: calc(100% - 120px); } #sub.mypage .edit_b ul li.cap .inp_w{ flex-flow: column; text-align: left; align-items: flex-start; gap: 10px; height: auto; } #sub.mypage .edit_b ul li.cap .inp_w .in_box{ height: 60px; } #sub.mypage .edit_b ul li .error{ font-size: 14px; color:#FF0000; } #sub.mypage .edit_b ul li .capt{ font-size: 14px; } #sub.mypage .btn_w{ position: relative; width :700px; margin: 0 auto; margin-top: 60px; } #sub.mypage .go_btn .del{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); } #sub.mypage .go_btn .del{ border-radius: none; padding: 0; width: auto; height: auto; background-color: transparent; font-size: 16px; color:#999999; text-decoration: underline; } #sub.mypage .go_btn .del:hover{ padding: 0; } #sub.mypage.del .go_btn { gap: 20px; display: flex; } #sub.mypage.del .go_btn a:nth-child(1){ background-color: #A6BDC6; } #sub.mypage.del .del_box > p{ font-size: 18px; color:#666666; margin-bottom: 20px; text-align: center; } #sub.mypage.del .del_box .box{ border-radius: var(--border-radius); border: 1px solid #D9E3E8; padding: 40px; background-color: #F2F6F8; } #sub.mypage.del .del_box .box ul{ display: flex; flex-flow: column; gap: 20px; } #sub.mypage.del .del_box .box ul li{ padding-left: 12px; line-height: 1.5em; color: #333333; font-size: 18px; position: relative; } #sub.mypage.del .del_box .box ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #999999; position: absolute; left: 0; top: 11px; } #sub.friend .con01 .point_if{ border-radius: var(--border-radius); background-color: #F2F6F8; padding: 70px 0; display: flex; flex-flow: column; align-items: center; text-align: center; margin-bottom: 80px; } #sub.friend .con01 .point_if svg{ margin-bottom: 40px; } #sub.friend .con01 .point_if strong{ font-size: 30px; color:#000000; margin-bottom: 20px; } #sub.friend .con01 .point_if strong b{ color: #16A5EF; } #sub.friend .con01 .point_if p{ color:#999999; } #sub.friend .con01 .bt{ display: flex; gap: 120px; position: relative; align-items: center; } #sub.friend .con01 .bt > div{ width: 50%; } #sub.friend .con01 .bt:after{ content:""; display: block; background-color: #D9E3E8; width: 1px; height: 100%; position: absolute; left: 50%; top: 0; } #sub.friend .con01 .bt .give{ display: flex; gap: 50px; text-align: center; } #sub.friend .con01 .bt .give > div{ width :50%; } #sub.friend .con01 .bt .give .box{ margin-top: 30px; height: 270px; display: flex; flex-flow: column; justify-content: center; align-items: center; background-color: #F2F6F8; border-radius: var(--border-radius); } #sub.friend .con01 .bt .give .box svg{ margin-bottom: 20px; } #sub.friend .con01 .bt .give .box strong{ font-size: 24px; font-weight: 600; color: #000; margin-bottom: 10px; display: block; } #sub.friend .con01 .bt .give .box p{ color: #666666; font-size: 16px; font-weight: 300; } #sub.friend .con01 .bt .reference .code{ margin-top: 20px; border-radius: var(--border-radius); height: 80px; width: 100%; background-color: #16A5EF; display: flex; align-items: center; padding: 0 40px; color:#FFFFFF; font-size: 24px; } #sub.friend .con01 .bt .reference .share_b{ display: flex; gap: 20px; margin-top: 20px; } #sub.friend .con01 .bt .reference .share_b a{ width: 260px; height: 68px; display: flex; align-items: center; padding: 12px; border: 2px solid #D9E3E8;border-radius: 70px; gap: 16px; transition: border .3s; } #sub.friend .con01 .bt .reference .share_b a p{ font-size: 18px; font-weight: 500; color:#000000; } #sub.friend .con01 .bt .reference .share_b a:hover{ border-color: #16a5ef; } #sub.friend .con02 ul{ display: flex; flex-flow: column; gap: 10px; margin-top: 25px; } #sub.friend .con02 ul li{ font-size: 22px; line-height: 32px; color: #333333; position: relative; padding-left: 12px; } #sub.friend .con02 ul li:after{ content:"-"; display: block; font-size: 16px; color: #333; position: absolute; left: 0; top: 0px; } #sub.point .con01{ text-align: center; padding-bottom: 0; } #sub.point .con01 > p{ font-size: 20px; line-height: 1.5em; color:#999999; margin-top: 30px; } #sub.point .con01 .color_bg{ margin-top: 80px; padding-bottom: 100px; padding-top: 80px; } #sub.point .con01 .color_bg .flag_n{ padding-bottom: 20px; border-bottom: 1px solid #CDD9DF; margin-bottom: 60px; } #sub.point .con01 .color_bg .flag_n ul{ display: flex; justify-content: center; gap: 60px; } #sub.point .con01 .color_bg .flag_n ul li{ position: relative; } #sub.point .con01 .color_bg .flag_n ul li a .flag{ position: relative; padding: 5px; border-radius: 50%; display: inline-block; border: 2px solid #B2C3CC; } #sub.point .con01 .color_bg .flag_n ul li a .flag img{ display: block; box-shadow: 0 0 40px rgba(60,180,229,0.5); border-radius: 50%; border: 1px solid #B2C3CC; } #sub.point .con01 .color_bg .flag_n ul li.on a .flag{ border-color: #3cb4e5; } #sub.point .con01 .color_bg .flag_n ul li.on a .flag img{ border-color: #3cb4e5; } #sub.point .con01 .color_bg .flag_n ul li.on:after{ content:""; display: block; width: 100%; height: 4px; border-radius: 4px; background-color: #3CB4E5; position: absolute; left: 0; bottom: -22px; } #sub.review .con02{ background-color: #F2F6F8; } #sub.point .con01 .color_bg .flag_n ul li p{ font-size: 20px; font-weight: 600; color:#666666; margin-top: 15px; } #sub.point .con01 .color_bg .flag_n ul li.on p{ color: #3cb4e5; } #sub.point .con01 .p_list ul{ display: flex; flex-flow: wrap; gap: 60px; justify-content: center; } #sub.point .con01 .p_list ul li{ width: calc(25% - 45px); } #sub.point .con01 .p_list ul li a{ display: block; border-radius: 10px; border: 2px solid #D9E3E8; padding: 10px; background-color: #fff; transition: background .3s; } #sub.point .con01 .p_list ul li a .img img{ display: block; width: 100%;border-radius: 10px; } #sub.point .con01 .p_list ul li a .txt{ padding: 20px; padding-bottom: 30px; } #sub.point .con01 .p_list ul li a .txt strong{ text-align: center; font-size: 18px; line-height: 1.5em; color:#000000; display: block; margin-bottom: 20px; transition: color .3s; } #sub.point .con01 .p_list ul li a .txt .minus{ border-top: 1px solid #D9E3E8; padding-top: 20px; display: flex; flex-flow: column; align-items: center; gap:6px; transition: border-color .3s; } #sub.point .con01 .p_list ul li a .txt .minus p{ font-size: 16px; color:#16A5EF; font-weight: 500; transition: color .3s; } #sub.point .con01 .p_list ul li a .txt .minus span{ width: 160px; height: 40px; border-radius: 60px; background-color: #16A5EF; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color:#FFFFFF; transition: color .3s, background .3s; } #sub.point .con01 .p_list ul li a:hover{ background-color: #16A5EF; } #sub.point .con01 .p_list ul li a:hover .txt strong{ color: #fff; } #sub.point .con01 .p_list ul li a:hover .txt .minus p{ color: #fff; } #sub.point .con01 .p_list ul li a:hover .txt .minus span{ background-color: #fff; color: #3CB4E5; } #sub.point .con01 .p_list ul li a:hover .txt .minus{ border-color: #63C9F2; } #sub.coupon .con03 .inner > strong{ text-align: center; margin-bottom: 30px; } #sub.coupon .con03 .inner > p{ text-align: right; font-size: 16px; font-weight: 300; color:#999999; } #sub.coupon .con03 .inner > p b{ font-weight: 700; color:#000000; margin-bottom: 10px; } #sub.coupon .con03 .c_list{ margin-top: 40px; } #sub.coupon .con03 .c_list table{ width: 100%; border-collapse: separate; border-spacing: 0 10px; width: 100%; } #sub.coupon .con03 .c_list table th{ height: 60px; vertical-align: middle; text-align: center; font-size: 18px; font-weight: 600; color:#000000; } #sub.coupon .con03 .c_list table th:first-child{ width: 65%; } #sub.coupon .con03 .c_list table td{ padding: 15px 20px; background-color: #F2F6F8; vertical-align: middle; text-align: center; color: #999999; font-size: 16px; } #sub.coupon .con03 .c_list table td:first-child{ border-radius: 20px 0 0 20px; text-align: left; } #sub.coupon .con03 .c_list table td:last-child{ border-radius: 0 20px 20px 0; color: #3CB4E5 } #sub.coupon .con03 .c_list table td .wrap{ display: flex; align-items: center; gap: 30px; } #sub.coupon .con03 .c_list table td .wrap .img img{ width: 150px; border-radius: 10px; display: block; } #sub.coupon .con03 .c_list table td .wrap .txt{ display: flex; flex-flow: column; gap: 10px; } #sub.coupon .con03 .c_list table td .wrap .txt strong{ font-size: 18px; font-weight: 600; color:#000000; } #sub.coupon .con03 .c_list table td .wrap .txt p{ font-size: 16px; font-weight: 400; color:#81929B; } /* 로그인 */ #sub.member{ } #sub.member .form_btn{ width: 100%; height: 70px; border-radius: 80px; display: flex; justify-content: center; align-items: center; color:#fff; background-color: #0090FF; font-size: 22px; font-weight: 600; color:#FFFFFF; transition: opacity .3s; } #sub.member .form_btn:hover{ opacity: .6; } #sub.member .sub_con{ background-color: #F2F6F8; padding-top: 240px; padding-bottom: 200px; min-height: 100vh; } #sub.member .sub_con .wrap{ width: 600px; margin: 0 auto; } #sub.member .sub_con .st1{ font-size: 60px; font-weight: 600; color: #000; displaY: block; text-align: center; } #sub.member .sub_con .st2{ font-size: 22px; color:#000000; font-weight: 500; } #sub.member .sub_con .st2 span{ color:#3CB4E5 } #sub.member .sub_con .wrap .id_chk{ display: flex; align-items: center; position: relative; padding-left: 32px; } #sub.member .sub_con .wrap .id_chk input{position: absolute;left: 0;opacity: 0;z-index: 2;width: 20px;height: 20px; top: 50%; transform: translate(0,-50%);} #sub.member .sub_con .wrap .id_chk label{color: #999999;font-size: 16px; } #sub.member .sub_con .wrap .id_chk label:before{content: '';display: inline-block;width: 20px;height: 20px;background: url(/img/sub/chk3.png);vertical-align: middle;position: absolute;left: 0; top: 50%; transform: translate(0,-50%); } #sub.member .sub_con .wrap .id_chk input:checked + label:before{background: url(/img/sub/chk4.png);} #sub.member .sub_con .wrap form{ display: flex; flex-flow: column; gap: 10px; margin-top: 60px; } #sub.member .sub_con .wrap form .id_chk{ margin: 20px 0; } #sub.member .sub_con .wrap form .btn_wrap{ margin: 20px 0; } #sub.member .sub_con .wrap form .btn_wrap ul{ display: flex; justify-content: center; gap: 14px; align-items: center; } #sub.member .sub_con .wrap form .btn_wrap ul .line{ width: 1px; height: 12px; background-color: #CBD8DF; } #sub.member .sub_con .wrap form .btn_wrap ul li a{ font-size: 16px; color:#666666; } #sub.member .sns_login{ margin-top: 20px; border-top: 1px solid #CBD8DF; padding-top: 30px; } #sub.member .sns_login ul{ display: flex; gap: 40px; justify-content: center; } #sub.member .sub_con{ display: flex; align-items: center; } #sub.member .inner{ display: flex; align-items: center; gap: 60px; } #sub.login .sub_con{ padding: 0; width: 100%; display:flex; align-items: center; justify-content: center; } #sub.sear .sub_con{ padding: 0; width: 100%; display:flex; align-items: center; justify-content: center; } #sub.sear .box{ width: 50%; padding: 50px; border-radius: var(--border-radius); background-color: #fff; border: 1px solid #D9E3E8; } #sub.sear .box strong{ display: block; font-size: 30px; font-weight: 600; color: #000; margin-bottom: 20px; } #sub.sear .box p{ font-size: 18px; color:#666666; line-height: 1.5em; padding-bottom: 20px; border-bottom: 1px solid #D9E3E8; } #sub.sear .box .go_btn{ margin-top: 20px; justify-content: flex-start; } #sub.sear .box .go_btn a{ width: 260px; padding: 0 !important; } #sub.result .box_wrap{ border-radius: var(--border-radius); border: 1px solid #D9E3E8; background-color: #fff; padding: 50px; width: 700px !important;text-align: center;} #sub.sear .stst{ display: block; font-size: 30px; color:#000000; font-weight: 600; } #sub.sear .pp{ font-size: 18px; color: #666666; } #sub.result03 .flex_t .stst{ font-size: 24px; } #sub.result .flex_t{ display: flex; flex-flow: column; align-items: center; gap: 30px; } #sub.result .info{ margin-top: 30px; } #sub.result .info .txt_b{ border-radius: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background-color: #E8F1F5; margin-bottom: 20px; } #sub.result .info .txt_b strong{ font-size: 22px; color:#58646B; font-weight: 400; } #sub.result .info p{ font-size: 16px; color: #666666; } #sub.result .wrap .go_btn{ margin-top: 30px; gap: 20px; padding-top: 30px; border-top: 1px solid #D9E3E8; } #sub.result .wrap .go_btn a{ width: 50%; padding: 0 !important; } #sub.result .wrap .go_btn .line_b{ border: 2px solid #16A5EF; color: #16A5EF; font-weight: 600; background-color: transparent; transition: opacity .3s; } #sub.result .wrap .go_btn .line_b:hover{ opacity: .6; } #sub.result form{ margin-top: 30px !important; } #sub.join .join_form{ margin-top: 120px !important; margin-bottom: 120px; } #sub.join .join_form ul{ display: flex; flex-flow: column; gap: 60px; } #sub.join .join_form ul li > strong{ padding-left: 30px; display: block; margin-bottom: 12px; font-size: 18px; font-weight: 500; color:#000000; } #sub.join .join_form ul li > strong span{ color:#3CB4E5; } #sub.join .join_form ul li .f_wrap{ position: relative; } #sub.join .join_form ul li .f_wrap button{ position: absolute; width: 140px; height: 60px; background-color: #0090FF; color: #fff; font-size: 18px; font-weight: 500; right: 0; top: 0;border-radius: 70px; } #sub.join .join_form ul li .error{ padding-left: 30px; font-size: 16px; font-weight: 300; color:#FF4848; margin-top: 12px; } #sub.join .join_form ul li .f_wrap3{ margin-bottom: 10px; height: 60px; width: 100%; position: relative; border: 1px solid #d9e3e8; border-radius: 100px; background-color: #fff; } #sub.join .join_form ul li .f_wrap3:last-child{margin-bottom: 0; } #sub.join .join_form ul li .f_wrap3 .in_chk{ width: 100%; height: 100%; opacity: 0; } #sub.join .join_form ul li .f_wrap3 label{ width: 100%; height: 100%; display: flex; align-items: center; padding-left: 60px; z-index: 1; position: absolute; left: 0; top: 0; font-size: 18px; color: #333; cursor: pointer; } #sub.join .join_form ul li .f_wrap3 label:before{ content:""; display: block; width: 20px; height: 20px; background: url(/img/sub/chk3.png); position: absolute; left: 30px; top: 50%; transform: translate(0,-50%); } #sub.join .join_form ul li .f_wrap3 .in_chk:checked + label:before{ background: url(/img/sub/chk4.png); } #sub.join .inner{ flex-flow: column; gap: 100px; } #sub.member .sub_con .pers{ display: flex; align-items: center; position: relative; padding-left: 28px; } #sub.member .sub_con .pers input{position: absolute;left: 0;opacity: 0;z-index: 2;width: 20px;height: 20px; top: 50%; transform: translate(0,-50%);} #sub.member .sub_con .pers label{color: #000000;font-size: 16px; } #sub.member .sub_con .pers label:before{content: '';display: inline-block;width: 20px;height: 20px;background: url(/img/sub/chk3.png);vertical-align: middle;position: absolute;left: 0; top: 50%; transform: translate(0,-50%); } #sub.member .sub_con .pers input:checked + label:before{background: url(/img/sub/chk4.png);} #sub.join01 .go_btn{ display: flex; gap: 20px; } #sub.join01 .go_btn a{ width: 300px; padding: 0 !important; } #sub.join01 .go_btn .line_b{ border: 2px solid #16A5EF; color: #16A5EF; font-weight: 600; background-color: transparent; transition: opacity .3s; } #sub.join01 .go_btn .line_b:hover{ opacity: .6; } #sub.join01 .per_wrap{ display: flex; gap: 20px; flex-flow: column; } #sub.join01 .per_wrap p{ border-radius: var(--border-radius); border: 1px solid #D9E3E8; background-color: #fff; padding: 40px; height: 200px; overflow-y: scroll; font-size: 18px; line-height: 1.5em; color:#666666; } #sub.join01 .per_wrap:nth-child(4){ padding: 40px 0; border-top: 1px solid #CBD8DF; border-bottom: 1px solid #CBD8DF; width: 100%; } #sub.join01 .per_wrap:nth-child(4) .pers label{ font-size: 22px; font-weight: 500; color:#000000; } #sub.join01 .per_wrap:nth-child(4) .pers label span{ color: #A3BECC } #sub.join01 .per_wrap:nth-child(5) .pers label{ font-size: 22px; color: #000; font-weight: 500; } #sub.book .con01 ul{ display: flex; gap: 60px; flex-flow: wrap; } #sub.book .con01 ul li{ width: calc(50% - 30px); } #sub.book .con01 ul li a{ padding: 52px; border-radius: var(--border-radius); background-color: #F2F6F8; display: block; display: flex; align-items: center; justify-content: center; transition: background .3s; } #sub.book .con01 ul li a:hover{ background-color: #0090FF; } #sub.book .con01 ul li a img{ border-radius: var(--border-radius); display: block; max-width: 100%; } #sub.h_video .con01{ padding-top: 120px; } #sub.h_video .line{ background-color: #D9E3E8; width: 1420px; height: 1px; margin: 0 auto; } #sub.h_video .st01{ text-align: center; } #sub.h_video .v_wrap{ padding: 60px 110px; border:1px solid #D9E3E8; background-color: #F2F6F8; border-radius: var(--border-radius); margin-top: 40px; position: relative; } #sub.h_video .v_wrap > div{ position:relative; height:0; padding-bottom:56.25%; } #sub.h_video .v_wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border-radius: var(--border-radius); } #sub.poly01 .con01 .c01{ display: flex; gap: 40px; align-items: center; padding-bottom: 60px; border-bottom: 1px solid #D9E3E8; } #sub.poly01 .con01 .c01 .img{ width: 50%; } #sub.poly01 .con01 .c01 .txt{ width: 50%; padding-left: 40px; display: flex; gap: 30px; flex-flow: column; } #sub.poly01 .con01 .c02{ padding-top: 87px; } #sub.poly01 .con01 .c02 .img img{ border-radius: var(--border-radius); } #sub.poly01 .con01 .c02 .txt{ padding-top: 28px; text-align: center; } #sub.poly01 .con01 .c01 .txt p{ word-break: keep-all; } #sub.poly .nb_box .n_title .number_t{ display: flex; gap: 10px; flex-flow: nowrap; } #sub.poly .nb_box .nb_con .c_box{ padding: 40px; border-radius: var(--border-radius); display: flex; justify-content: center; align-items: center; position: relative; border: 2px solid #CBD8DF;} #sub.poly .nb_box .nb_con .caption{ position: absolute; right: 30px; bottom: 30px; font-size: 16px; color:#999999; text-align: right; } #sub.poly .nb_box .nb_con .c_box .nb_ul{ width: 100%; } #sub.poly .nb_box .nb_con .c_box .nb_ul li{ line-height: 32px; padding-left: 12px; position: relative; font-size: 18px; color:#81929B; } #sub.poly .nb_box .nb_con .c_box .nb_ul li:after{ content:""; width: 4px; height: 4px; border-radius: 50%; font-size: 18px; font-weight: 400; background-color: #81929b; position: absolute; left: 0; top: 13px; } #sub.poly01 .con02 .nb_box .nb_con .c_box .img img{ max-width: 551px; } #sub.poly01 .con04 .nb_box .nb_con .img img{ max-width: 350px; } #sub.poly01 .con07 .nb_box2 .img img{ max-width: 796px; } #sub.poly01 .con08 .nb_box2 .img img{ max-width: 946px; } #sub.poly .nb_box .nb_con .img.centers{ display: flex; align-items: center; justify-content: center; } #sub.poly .nb_box .nb_con .color_b{ padding: 40px; border-radius: var(--border-radius); background-color: #F2F6F8; display: flex; align-items: center; justify-content: center; position: relative; } #sub.poly .con05 .nb_box .nb_con .color_b img{ mix-blend-mode: darken; } #sub.poly .nb_box .p01{ word-break: keep-all; } #sub.poly .nb_box .st04{ font-size: 24px; line-height: 1.5em; color:#000000; text-align: center; } #sub.poly .con_w2 .nb_box{ gap: 0px; } #sub.poly .con_w2 .st04{display:block; margin-bottom: 40px; } #sub.poly .con_w2 .nb_con{ margin-bottom: 20px; } #sub.poly .info_p{ margin-top: 0; } #sub.poly .con_w2 .nb_con .c_box{ width: auto; padding: 20px 30px; } #sub.poly .con_w2 .nb_con .c_box .nb_ul{ width: auto; } #sub.poly .con_w2 .nb_con2{ display: flex; align-items: center; justify-content: center; } #sub.poly .con08 .nb_box .nb_con .color_b{ background-color: #F2F6F8; } #sub.poly .con_w2 .wrap{ display: flex; gap: 60px; } #sub.poly .con_w2 .wrap > div{ width: 50%; } #sub.poly .con_w2 .wrap > div > strong{ text-align: center; display: block; margin-bottom: 20px; font-size: 20px; font-weight: 600; color:#000000; } #sub.poly .con_w2 .img img{border-radius: var(--border-radius); } #sub.poly .con01{ padding-top: 120px; } #sub.poly .nb_box .nb_table{ margin-bottom: 40px; } #sub.poly .nb_box .nb_table table{ width: 100%; border-collapse: separate; border-spacing: 10px 10px; } #sub.poly .nb_box .nb_table table th.cb{ background-color: #EDF2F4; } #sub.poly .nb_box .nb_table table th{ border-radius: var(--border-radius); background-color: #3CB4E5; height: 60px; vertical-align: middle; text-align: center; font-size: 18px; font-weight: 500; color:#FFFFFF; } #sub.poly .nb_box .nb_table table td{ height: 60px; border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; font-size: 18px; line-height: 1.5em; color:#666666; vertical-align: middle; text-align: center; } #sub.poly .nb_box .nb_table .cp{ font-size: 12px; text-align: center; margin-top: 14px; color: #81929B; } #sub.poly .nb_box .table_wrap{ flex-flow: column; gap: 12px; align-items: flex-start; } #sub.poly .nb_box .table_wrap > strong{ font-size: 20px; font-weight: 600; color:#000000; } #sub.poly .nb_box .table_wrap .info_p{ margin-top: 10px; } #sub.poly .nb_box .table_wrap .nb_table01 th:nth-child(2){ width: 66.6666%; } #sub.poly02 .con01 .inner .mark{ max-height: 238px; } #sub.poly02 .con01 .inner .mark img{ mix-blend-mode: darken; max-width: 136px; } #sub.poly01 .con_w:nth-child(3){ padding-bottom: 0; } #sub.poly01 .con_w:nth-child(3) ~ .con_w{ padding-bottom: 0; padding-top: 60px; } #sub.poly01 .con09{ padding-bottom: 120px !important; } #sub.poly02 .con01 .inner{ display: flex; gap: 20px; align-items: stretch; } #sub.poly02 .con01 .inner .flag{ display: flex; flex-flow: column; align-items: center; gap: 10px; } #sub.poly02 .con01 .inner .flag strong{ font-size: 20px; font-weight: 600; color: #fff; width: 95px; height: 49px; border-radius: 50px; background-color: #728A97; display: flex; justify-content: center; align-items: center; } #sub.poly02 .con01 .inner .list{ display: flex; flex-flow: column; gap: 20px; } #sub.poly02 .con01 .inner .list > dl{ border-radius: var(--border-radius); background-color: #F2F6F8; padding: 30px; display: flex; gap: 15px; align-items: center; } #sub.poly02 .con01 .inner .list > dl dd strong{ font-size: 20px; color:#000000; font-weight: 500; margin-bottom: 9px; display: block; } #sub.poly02 .con01 .inner .list > dl dd p{ font-size: 18px; color:#999999; } #sub.poly02 .con01 .inner .mark{ width: 268px; border-radius: var(--border-radius); background-color: #F2F6F8; display: flex; align-items: center; justify-content: center; } #sub.poly02 .con01 .inner .list{ width: calc(100% - 308px); } #sub.poly02 .con02 .cert{ border-radius: var(--border-radius); background-color: #F2F6F8; padding: 60px;display: flex; align-items: center; justify-content: center; width: 100%; } #sub.poly02 .con02 .cert .img img{ max-width: 626px; } #sub.poly02 .con01{ padding-top: 120px; } #sub.poly02 .s_tit{ text-align: center; margin-bottom: 60px; } #sub.poly02 .con02{ padding-top: 0; } #sub.poly02 .con02 .inner{ display: flex; flex-flow: column; gap: 60px; align-items: center; } #sub.poly02 .con02 .mate{ display:flex; gap: 35px; align-items: center; border-radius: 10px; border: 1px solid #CBD8DF; padding: 40px; } #sub.poly02 .con02 .mate strong{ font-size: 20px; font-weight: 700; color:#000000; display: block; margin-bottom: 10px; } #sub.poly02 .con02 .mate p{ font-size: 16px; color:#666666; line-height: 26px; } #sub.poly02 .con02 .mate{ position: relative; } #sub.poly02 .con02 .mate:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; border: 4px solid #fff; position: absolute; left: 50%; top: : 0; transform: translateX(-50%); top: -6px; border-radius: 50%; background-color: #0090FF } #sub.bwa01 .con03 .nb_box .nb_con .color_b .img img{ max-width: 846px; } #sub.bwa01 .con07 .nb_box2 .img img{ max-width: 842px } #sub.bwa01 .con08 .nb_box2 .img img{ max-width: 100%; } #sub.board.poly03 .sub_visual .inner > strong{ color: #fff; } #sub.board.poly03 .sub_visual .inner ul li{ color: #fff; } #sub.board.poly03 .sub_visual .inner ul .dot{ background-color: #fff } #sub.board.poly03 .sub_visual .inner ul li.home svg path{ stroke: #fff; } #sub.board.poly03 .con01 .inner > strong{ text-align: center; margin-bottom: 100px; } #sub.board.poly03 .con01 .c_list ul{ display: flex; gap: 60px; flex-flow: wrap; } #sub.board.poly03 .con01 .c_list ul li{ width: calc(33.33333% - 40px); } #sub.board.poly03 .con01 .c_list ul li a{ position: relative; } #sub.board.poly03 .con01 .c_list ul li a .img img{ border-radius: var(--border-radius); } #sub.board.poly03 .con01 .c_list ul li a .hover{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.5); transition: transform .5s, opacity .5s; opacity: 0; z-index: 2; } #sub.board.poly03 .con01 .c_list ul li a:hover .hover{ transform: translate(-50%,-50%) scale(1); opacity: 1; } #sub.board.poly03 .con01 .c_list ul li a:after{ content:""; display: block; width: calc(100% + 20px); height: calc(100% + 20px); border-radius: 20px; border:2px solid #3CB4E5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); box-sizing: border-box; opacity: 0; transition: opacity .5s; } #sub.bwa02 .con01 .inner .mark img{ mix-blend-mode: normal; } #sub.board.poly03 .con01 .c_list ul li a:hover:after{ opacity: 1; } #sub.board.poly03 .b_top{ margin-bottom: 40px; } #sub.bwa02 .con03 .nb_con{ display:flex; flex-flow: column; gap: 40px; } #sub.bwa02 .con03 .nb_con dl{ display: flex; flex-flow: column; gap: 20px; } #sub.bwa02 .con03 .nb_con dl dt{ font-size: 20px; font-weight: 600; color:#000000; } #sub.bwa02 .con03 .nb_con dl dd{ padding: 25px 30px; font-size: 22px; line-height: 32px; color:#333333; border: 2px solid #CBD8DF; border-radius: 10px; } #sub.bwa01 .con01 .c01{ padding-bottom: 0; border: none; } #sub.bwa01 .img2 img{ mix-blend-mode: darken; } #sub.bwa01 .con02 .wrap{ display: flex; gap: 60px; align-items: center; flex-flow: row-reverse; } #sub.bwa01 .con02 .wrap > div{ width: calc(50% - 30px); } #sub.bwa01 .con02 .wrap .txt dl dt{ padding-left: 30px; font-size: 20px; font-weight: 600; color:#000000; margin-bottom: 18px; } #sub.bwa01 .con02 .wrap .txt dl dt span{ font-size: 16px; color:#999999; display:inline-block; margin-left: 8px; font-weight: 400;} #sub.bwa01 .con02 .wrap .txt dl dd{ border-top: 1px solid #D9E3E8; border-bottom: 1px solid #D9E3E8; padding: 20px 30px; padding-right: 0; } #sub.bwa01 .con02 .wrap .txt dl dd ul{ display: flex; flex-flow: column; gap: 5px; } #sub.bwa01 .con02 .wrap .txt dl dd ul li{ padding-left: 10px; position: relative; font-size: 18px; color:#333333; line-height: 1.5em; } #sub.bwa01 .con02 .wrap .txt dl dd ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #999; position: absolute; left: 0; top: 12px; } #sub.bwa01 .con_w .nb_box2 .st04{ position: relative; display: flex; justify-content: center; } #sub.bwa01 .con_w .nb_box2 .st04 .num{ display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 10px; border: 2px solid #3CB4E5; font-size: 20px; font-weight: 600; color:#3CB4E5; position: absolute; left: 0%; } #sub.bwa01 .nb_box .nb_con .c_box{ justify-content: flex-start; } #sub.bwa01 .con08 .nb_box .nb_con .color_b{ background-color: #F2F6F8; } #sub.bwa01 .con09 .nb_box .nb_con .color_b{ padding: 0; margin-bottom: 10px; } #sub.bwa01 .con11 .nb_box .nb_con .color_b{ background-color: #EEEFEF; } #sub.bwa01 .con_w:nth-child(3){ padding-bottom: 0; } #sub.bwa01 .con_w:nth-child(3) ~ .con_w{ padding-bottom: 0; padding-top: 60px; } #sub.bwa01 .con15{ padding-bottom: 120px !important; } #sub.museum .con01{ padding-top: 120px; position: relative; } #sub.museum .con01:before{ content:""; display: block; width: 100%; height: 430px; background-color: #000C2F; position: absolute; left: 0; top: -1px; } #sub.museum .con01 .video{ border-radius: var(--border-radius); overflow: hidden; position: relative; z-index: 1; } #sub.museum .con01 .txt{ padding-top: 100px; text-align: center; display: flex; align-items: center; flex-flow: column; justify-content: center; gap: 20px; margin-bottom: 60px; } #sub.museum .con01 .txt p{ font-size: 20px; line-height: 32px; color:#333333; } #sub.museum .con01 .t_box{ border-radius: var(--border-radius); border:2px solid #CBD8DF; text-align: center; padding: 40px 12px; } #sub.museum .con01 .t_box p{ font-size: 24px; line-height: 42px; color:#000000; } #sub.museum .con01 .t_box p b{ color:#3CB4E5; } #sub.museum .con02{ background: url('/img/sub/museum_bg01.jpg') center top no-repeat; background-size: cover; } #sub.museum .con02 .c01{ height: 100vh; display: flex; align-items: center; justify-content: center; } #sub.museum .con02 .c01 ul{ display:flex; gap: 20px; } #sub.museum .con02 .c01 ul li{ border-radius: 40px; border: 4px solid rgba(100,123,165,0.5); background: rgba(0,13,47,0.6); backdrop-filter: blur(10px) brightness(130%); width: 33.33333333%; display: flex; flex-flow: column; align-items: center; padding: 40px; } #sub.museum .con02 .c01 ul li .txt{ display: flex; flex-flow: column; align-items: center; text-align: center; } #sub.museum .con02 .c01 ul li .txt strong{ font-size: 36px; font-weight: 600; color:#fff; } #sub.museum .con02 .c01 ul li .txt em{ font-size: 18px; color:#D4DAE9; margin-top: 8px; } #sub.museum .con02 .c01 ul li .txt p{ font-size: 20px; line-height: 32px; font-weight: 300; color:#BAC6E4;margin-top: 38px; word-break: keep-all; } #sub.museum .con02 .c02{ margin-top: 100px; padding-bottom: 200px; padding-top: 190px; } #sub.museum .con02 .c02 strong{ font-size: 32px; font-weight: 500; color:#FFFFFF; text-align: center; display: block;margin-bottom: 60px; } #sub.museum .con02 .c02 ul{ display: flex; gap: 150px; justify-content: center; } #sub.museum .con02 .c02 ul li{ display: flex; gap: 30px; flex-flow: column; align-items: center; } #sub.museum .con02 .c02 ul li i{ display: flex; width: 170px; height: 170px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #6DF0FA; background: rgba(109,240,250,0.2); backdrop-filter: blur(5px); } #sub.museum .con02 .c02 ul li dl { display: flex; flex-flow: column; gap: 20px; align-items: center; text-align: center; } #sub.museum .con02 .c02 ul li dt{ display: block; font-size: 24px; font-weight: 500; color:#fff; } #sub.museum .con02 .c02 ul li dd{ display: flex; gap: 20px; flex-flow: column; } #sub.museum .con02 .c02 ul li dd span{ padding: 7px 20px; border-radius: 70px; background-color: #3CB4E5; font-size: 18px; color:#FFFFFF; } #sub.museum .con02 .c02 ul li dd p{ font-size: 16px; line-height: 28px; color: #BAC6E4; font-weight: 300; } #sub.museum .con03 .st01{ text-align: center; margin-bottom: 60px; } #sub.museum .con03 .wrap{ position: relative; display: flex; align-items: center; justify-content: space-between; } #sub.museum .con03 .wrap .m_info{ width: calc(100% - 1000px); display:flex; flex-flow: column; gap: 20px; } #sub.museum .con03 .wrap .map{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} #sub.museum .con03 .wrap .map img{ max-width: 479px; } #sub.museum .con03 .wrap .m_info dl{ border-radius: var(--border-radius); padding: 35px 40px; background-color: #F2F6F8; } #sub.museum .con03 .wrap .m_info dl dt{ display: flex; align-items: center; gap: 10px; font-size: 24px; line-height: 1.5em; color:#000000; font-weight: 700; padding-bottom: 20px; border-bottom: 1px solid #CBD8DF; } #sub.museum .con03 .wrap .m_info dl dt span{ width: 52px; height: 52px; border-radius: 50%; padding: 6px; border: 2px solid #67D3FF; display: flex; align-items: center; justify-content: center; } #sub.museum .con03 .wrap .m_info dl dt span b{ font-size: 18px; color:#FFFFFF; font-weight: 400; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #67D3FF; border-radius: 50%; } #sub.museum .con03 .wrap .m_info dl dd { padding-top: 20px; font-size: 18px; line-height: 1.5em; color:#333333; } #sub.found{ position: relative; } #sub.found .found_visual{ position: absolute; left: 0; top: 0; width: 100%; background-color: transparent; } #sub.found .sub_con{ padding-top: 0; } #sub.found .con01{ background: url('/img/sub/found_bg01.jpg') center top no-repeat; padding-top: 400px; background-size: cover; } #sub.found .con01 .inner{ display: flex; align-items: center; flex-flow: column; gap: 40px; } #sub.found .con01 .age{ width: 360px; height: 360px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-flow: column; text-align: center; gap: 20px; background: rgba(0,12,47,0.75); backdrop-filter: blur(10px); position: relative; } #sub.found .con01 .age:after{ content:""; display: block; width: calc(100% + 40px); height: calc(100% + 40px); background: url('/img/sub/age_line.png') center center no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: circ 50s linear; } #sub.found .con01 .age > span{ padding: 12px 30px; font-size: 20px; font-weight: 600; color:#FFFFFF; border-radius: 70px; background-color: #14265A; } #sub.found .con01 .age > strong{ display: flex; font-size: 36px; font-weight: 600; color:#FFFFFF; align-items: center; gap: 4px; } #sub.found .con01 .age > strong span{ display: flex; transform: translateY(-10px); } #sub.found .con01 .age > strong span b{ font-size: 80px; font-weight: 700; color: #FFFFFF; } #sub.found .con01 .age2{ width: 260px; height: 260px; position: relative; z-index: 1; backdrop-filter: blur(10px) brightness(1.6); } #sub.found .con01 .age2:after{ background: url('/img/sub/age_line2.png') center center no-repeat; } #sub.found .con01 .age2 > span{ font-size: 18px; } #sub.found .con01 .age2 > strong{ font-size: 24px; } #sub.found .con01 .age2 > strong span b{ font-size: 60px; } #sub.found .con01 .however { display: flex; flex-flow: column; align-items: center; gap: 20px; position: relative; width: 100%; } #sub.found .con01 .however .line{ width: 1px; height: 100PX; background-color: rgba(255,255,255,0.25); margin: 0 auto; } #sub.found .con01 .however strong{ font-size: 30px; font-weight: 600; color:#FFFFFF; position: relative; display: inline-block; } #sub.found .con01 .however:after{ content:""; display: block; width: calc(50% - 110px); height: 1px; background-color: rgba(255,255,255,0.25); position: absolute; left: 0; top: 50%; } #sub.found .con01 .however:before{ content:""; display: block; width: calc(50% - 110px); height: 1px; background-color: rgba(255,255,255,0.25); position: absolute; right: 0; top: 50%; } #sub.found .con01 .img{ margin-top: -170px; } #sub.found .con01 .img img{ border-radius: var(--border-radius); mix-blend-mode :luminosity; opacity: .5; } #sub.found .con01 .txt{ margin-top: 70px; display: flex; flex-flow: column; align-items: center; gap :60px;} #sub.found .con_bg{ margin-top: -1px; } #sub.found .con_bg img{ width: 100%; } #sub.found .con01 .txt p{ text-align: center; font-size: 20px; line-height: 2em; color:#BAC6E4; } #sub.found .con01 .txt p b{ font-size: 30px; font-weight: 700; color:#FFFFFF; } #sub.found .con02 .inner{ display: flex; align-items: center; gap: 60px;flex-flow: column; } #sub.found .con02 ul{ display: flex; gap: 50px; padding: 80px 150px; border-radius: var(--border-radius); background-color: #F2F6F8; flex-flow: wrap; } #sub.found .con02 ul li{ width: calc(20% - 40px); text-align: center; display: flex; align-items: center; flex-flow: column; } #sub.found .con02 ul li svg{ filter: drop-shadow(0 0 20px rgba(0,39,88,0.1));} #sub.found .con02 ul li strong{ margin-top: 12px; display: inline-block; font-size: 18px; padding: 10px 20px; border-radius: 70px; background-color: #728A97; color:#FFFFFF;} #sub.found .con02 p{ text-align: center; } #sub.found .con03{ padding: 0; } #sub.found .con03 .inner{ position: relative; padding-top: 120px; padding-bottom: 120px; } #sub.found .con03 .hdl img{ filter: drop-shadow(0 20px 30px rgba(6,23,59,0.5)); animation: do 3s ease-in-out infinite; } #sub.found .con03 .hdl img:nth-child(1){ position: absolute; right: 0; top: 0;} #sub.found .con03 .hdl img:nth-child(2){ position: absolute; right: 40%; top: 20%; animation-delay: .3s; } #sub.found .con03 .hdl img:nth-child(3){ position: absolute; right: 15%; top: -15%;animation-delay: .6s; } #sub.found .con03 strong{ font-size: 48px; font-weight: 500; color:#83929A; line-height: 2em; } #sub.found .con03 strong .color0{ color: #365160; font-weight: 600; } #sub.found .con03 strong .color1{ color: #1D323D; font-weight: 600; } #sub.found .con03 strong .color2{ color: #0A86C4; font-weight: 700; } #sub.partner .con01{ padding-top: 120px; } #sub.partner .con01 p{ text-align: left; font-size: 24px; line-height: 42px; color: #000000; padding-bottom: 40px; border-bottom: 1px solid #D9E3E8; width: 100%; } #sub.partner .con01 ul{ display: flex; gap: 60px; } #sub.partner .con01 ul li{ width: 50%; } #sub.partner .con01 ul li img{ width: 100%; display: block; border-radius: var(--border-radius); border: 2px solid rgba(255,255,2550); transition: border .3s; } #sub.partner .con01 ul li:hover img{ border-color: #3CB4E5; } #sub.disease .con01{ background-color: #000C2F; margin-top: -1px; padding-top: 120px; } #sub.disease .con01 .title{ display: flex; flex-flow: column; align-items: center; gap: 20px; } #sub.disease .con01 .title strong{ color: #fff; } #sub.disease .con01 .wrap{ position: relative; } #sub.disease .con01 .wrap .center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.3); } #sub.disease .con01 .wrap .center{ transition: transform 1.5s, opacity 1.5s; opacity: 0; } #sub.disease .con01.on .wrap .center{ transform: translate(-50%,-50%) scale(1); opacity: 1; } #sub.disease .con01 .wrap .center:after{ content:""; width: calc(100% + 40px); height: calc(100% + 40px); background: url('/img/sub/case_cir.png') center center no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: circ 70s linear;} #sub.disease .con01 .wrap { display: flex; width: 100%; justify-content: space-between; z-index: 1; position: relative; } #sub.disease .con01 .wrap .list{ z-index: 1; position: relative; width: 540px; display: flex; gap: 30px; flex-flow: column; } #sub.disease .con01 .wrap .list > div{ border-radius: 40px; border: 2px solid rgba(60,180,229,0.2); background-color: rgba(60,180,229,0.1); backdrop-filter: blur(30px); padding: 30px 40px; cursor: pointer; transition: border .3s, background .3s; } #sub.disease .con01 .wrap .list > div:hover{ border-color: rgba(60,180,229,1); background-color: rgba(60,180,229,0.2); } #sub.disease .con01 .wrap .list > div .tit{ display: flex; position: relative; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 20px; border-bottom: 1px solid rgba(109,221,250,0.1); margin-bottom: 20px; } #sub.disease .con01 .wrap .list > div .tit .left{ display: flex; align-items: center; gap: 16px; } #sub.disease .con01 .wrap .list > div .tit .left strong{ font-size: 24px; font-weight: 600; color:#fff; } #sub.disease .con01 .wrap .list > div .tit:after{ width: 15%; height: 2px; content:""; display: block; position: absolute; right: 25%; top: 50%; transform: translate(-50%,0); background: url( '/img/sub/case_line.png') center center no-repeat;} #sub.disease .con01 .wrap .list > div .tit .left strong span{ font-size: 18px; color:#BAC6E4; font-weight: 400; } #sub.disease .con01 .wrap .list > div:last-child .tit:after{ right: 22%; width: 12%; } #sub.disease .con01 .wrap .list > div .txt p{ font-size: 16px; color: #BAC6E4; line-height: 1.5em; margin-bottom: 20px; } #sub.disease .con01 .wrap .list > div .txt dl dt{ font-size: 14px; font-weight: 300; color: #6E7A98; margin-bottom: 6px; } #sub.disease .con01 .wrap .list > div .txt dl dd{ font-size: 14px; line-height: 16px; color:#6E7A98; font-weight: 300; } #sub.disease .tabs ul{ display: flex; gap: 10px; } #sub.disease .tabs ul li{ width: calc(16.6666666666% - 8.333333333333333px); } #sub.disease .tabs ul li a{ display: block; padding: 20px; border-radius: var(--border-radius); border: 1px solid #D9E3E8;text-align: center; width: 100%; height: 100%; display:flex; flex-flow: column; align-items: center; justify-content: center; gap: 20px; transition: opacity .3s; } #sub.disease .tabs ul li a strong{ font-size: 20px; font-weight: 600; color:#5A6A72; } #sub.disease .tabs ul li a:hover{ opacity: .6; } #sub.disease .tabs ul li.on a{ background-color: #16A5EF; border-color: #16A5EF; opacity: 1 !important; } #sub.disease .tabs ul li.on a strong{ color: #fff; } #sub.disease .tabs ul li.on a svg circle{ fill: #0082C5; } #sub.disease .tabs ul li.on a svg path{ fill: #FFFFFF; } #sub.disease .nb_box{ padding: 60px 80px; } #sub.disease .nb_box .img_graph{ display: flex; gap: 40px; justify-content: space-between; } #sub.disease .con03 .d_tit{ border-bottom: 1px solid #CBD8DF; text-align: center; position: relative; } #sub.disease .con03 .d_tit .share{ position: absolute; right: 0; top: 0; } #sub.disease .con03 .d_tit > strong{ display: inline-block; position: relative; padding-bottom: 30px; } #sub.disease .con03 .d_tit > strong:after{ content:""; display: block; width: 100%; height: 4px; border-radius: 50px; background-color: #3CB4E5; position: absolute; left: 0; bottom: -2px; } #sub.disease .con03 .inner{ display: flex; flex-flow: column; gap: 60px; } #sub.disease .nb_box .n_title > p{ word-break: keep-all; } #sub.disease .nb_t{ font-size: 20px; font-weight: 600; color:#000000; margin-bottom: 20px; display: block; } #sub.disease .nb_box .img_graph{ padding-top: 30px; border-top: 1px solid #D9E3E8; } #sub.disease01 .nb_box3 .img_graph > img:nth-child(1){ width: 35%; height: auto; } #sub.disease01 .nb_box3 .img_graph > img:nth-child(2){ width: 65%; height: auto; } #sub.disease01 .nb_box4 .img_graph{ gap: 120px; } #sub.disease01 .nb_box4 .img_graph > div{ width: 50%; } #sub.disease01 .nb_box4 .img_graph > div img{ width: 100%; } #sub.disease02 .nb_box2 .nb_con{ display: flex; flex-flow: column; gap: 10px; padding-top: 40px; border-top: 1px solid #D9E3E8; margin-top: 40px; } #sub.disease02 .nb_box2 .nb_con .p01{ margin-bottom: 10px; } #sub.disease02 .nb_box2 .nb_con dl{ display: flex; align-items: center; border-radius: var(--border-radius); background-color: #F2F6F8; } #sub.disease02 .nb_box2 .nb_con dl dt{ border-radius: var(--border-radius); height: 140px; width: 200px; background-color: #16A5EF; font-size: 18px; font-weight: 500; color:#FFFFFF; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.5em; } #sub.disease02 .nb_box2 .nb_con dl dd{ width: calc(100% - 200px); padding-left: 30px; padding-right: 20px; font-size: 18px; line-height: 32px; color:#666666; } #sub.disease02 .nb_box3 .img_graph { padding-bottom: 30px; border-bottom: 1px solid #D9E3E8; } #sub.disease02 .nb_box3 .img_graph .wrap ul{ display: flex; gap: 110px; } #sub.disease03 .nb_box2 .nb_con{ padding-top: 30px; margin-top: 30px; border-top: 1px solid #D9E3E8; } #sub.disease03 .nb_box2 .nb_con .ca{ display: flex; gap: 12px; } #sub.disease03 .nb_box2 .nb_con .ca li{ width: 16.6666666666%; } #sub.disease03 .nb_box2 .nb_con .ca li img{ display: block; width: 100%; } #sub.disease03 .nb_box3 .info_p{ margin-top: 10px; text-align: left !important; } #sub.disease03 .nb_box3 .img_graph{ flex-flow: column !important; gap: 0; } #sub.disease03 .nb_box3 .img_graph .wrap{ display: flex; gap: 60px; } #sub.disease03 .nb_box4 .info_p{ text-align: left !important; } #sub.disease06 .nb_box4 .nb_con2 > .info_p{ margin-top: 20px; } #sub.disease06 .nb_box4 .war{ padding-top: 50px; border-top: 1px solid #D9E3E8; margin-top: 30px; } #sub.disease06 .nb_box4 .war .p_box{ border-radius: var(--border-radius); border: 2px solid #D9E3E8; padding: 25px 30px; } #sub.disease06 .nb_box4 .war .p_box p{ font-size: 22px; line-height: 32px; color:#333333; } #sub.disease06 .nb_box4 .war .info_p{ text-align: left; margin-top: 20px; } #sub.disease06 .nb_box2 .nb_con{ margin-top: 40px; padding-top: 0; border: none; } #sub.disease06 .nb_box2 .nb_con .wrap{ padding-bottom: 40px; border-bottom: 1px solid #D9E3E8; } #sub.disease06 .nb_box2 .nb_con .wrap ul{ display: flex; justify-content: center; gap: 120px; } #sub.disease06 .nb_box2 .nb_con .wrap ul li img{ max-width: 229px; } #sub.disease .nb_box .img2 img{ mix-blend-mode: darken; } #sub.disease05 .nb_box2 .img2 img{ max-width: 595px; } #sub.disease05 .nb_box3 .img2 img{ max-width: 975px; } #sub.disease06 .nb_con3 > .nb_t{ margin-bottom: 0; } #sub.disease06 .nb_box2 .nb_con{ gap: 4px !important; } #sub.disease06 .nb_box2 .info_p{ margin-top: 5px; text-align: left; } #sub.disease06 .nb_box2 .nb_con2 .img2 img{ max-width: 486px } #sub.disease06 .nb_box4 .nb_con2 .img2 img{ max-width: 663px } #sub.disease05 .nb_box2{ } #sub.disease05 .nb_box2 .nb_con{ flex-flow: column; padding-top: 20px; border-top: 1px solid #D9E3E8; margin-top: 20px; } #sub.disease05 .nb_con2{ padding-top: 30px; border-top: 1px solid #D9E3E8; } #sub.disease05 .nb_con2 .p_box{ border-radius: var(--border-radius); border: 2px solid #D9E3E8; padding: 25px 30px; } #sub.disease05 .nb_con2 .p_box p{ line-height: 32px; } #sub.disease05 .nb_con2 .info_p{ text-align: left; margin-top: 10px; } #sub.disease05 .nb_box5 .nb_con{ border-top: 1px solid #D9E3E8; padding-top: 30px; display: flex; flex-flow: column; align-items: center; } #sub.disease05 .nb_box5 .nb_con svg{ margin: 0 auto; } #sub.disease05 .nb_box5 .nb_con .info_p{ margin-top: 30px; } #sub.disease04 .nb_box3 .nb_con2{ border-top: 1px solid #D9E3E8; padding-top: 30px; } #sub.disease04 .nb_box3 .nb_con2 ul{ display: flex; gap: 20px; margin: 30px 0; } #sub.disease04 .nb_box3 .nb_con2 ul li{ width: 25%; } #sub.disease04 .nb_box3 .nb_con2 ul li img{ width: 100%; display: block; } #sub.disease04 .nb_box3 .nb_con2 .info_p{ text-align: left; } #sub.disease04 .nb_box4 .nb_con{ border-top: 1px solid #D9E3E8; padding-top: 30px; } #sub.disease04 .nb_box4 .nb_con ul{ display: flex; flex-flow: wrap; gap: 20px; } #sub.disease04 .nb_box4 .nb_con ul li{ width: calc(20% - 16px); } #sub.disease04 .nb_box4 .nb_con ul li img{ width: 100%; display: block; } #sub.disease04 .nb_box4 .nb_con .info_p{ margin-top: 30px; } #sub.disease04 .nb_box4 .nb_con .info_p3{ text-align: left; } #sub.disease04 .nb_box5 .nb_con .p_box{ padding: 30px 40px; border: 2px solid #CBD8DF; border-radius: var(--border-radius); margin-bottom: 20px; } #sub.disease04 .nb_box5 .nb_con .p_box p{ font-size: 18px; line-height: 32px; color:#000000; } #sub.disease04 .nb_box5 .nb_con .p_box p b{ color: #3CB4E5; } @keyframes do { 0%{ transform: translateY(0) } 50%{ transform: translateY(10px) } 100%{ transform: translateY(0) } } @keyframes circ { 0%{ transform: translate(-50%,-50%) rotate(0); } 100%{ transform: translate(-50%,-50%) rotate(360deg); } } .d_pop .wrap .box{ width: 1420px; padding: 60px 50px; height: calc(100vh - 120px); } .d_pop .wrap .box .d_tit{ margin-bottom: 60px; } .d_pop .wrap .box .d_tit strong{ text-align: center; display: block; font-size: 40px; color:#000000; font-weight: 400; } .d_pop .wrap .box .d_tit strong b{ font-weight: 700; color:#3CB4E5; } .d_pop1 .wrap .box .img_box{ display: flex; height: 600px; gap: 120px; align-items: center; position: relative; } .d_pop1 .wrap .box .img_box:after{ content:""; display: block; width: 1px; height: 100%; background-color: #D9E3E8; position: absolute; left: 50%; top: 0; } .d_pop1 .wrap .box .img_box .img{ width: 50%; } .d_pop1 .wrap .box .img_box .img img{ max-width: 100%; display: block; margin: 0 auto; } .d_pop2 .wrap .box .img_box{ display: flex; gap: 120px; position: relative; } .d_pop2 .wrap .box .img_box:after{ content:""; display: block; width: 1px; height: 100%; background-color: #D9E3E8; position: absolute; left: 50%; top: 0; } .d_pop2 .wrap .box .img_box .img img{ display: block ;width: 100%; } .d_pop2 .wrap .box .img_box > div{ width: 50%; display:flex; flex-flow: column; gap: 20px; } .d_pop2 .wrap .box .img_box > div > p{ font-size: 14px; line-height: 16px; font-weight: 300; color:#999999; } .d_pop2 .wrap .box .img_box .p_box{ padding: 30px; display: flex; gap: 10px; flex-flow: column; border-radius: var(--border-radius); background-color: #F2F6F8; } .d_pop2 .wrap .box .img_box .p_box strong{ font-size: 22px; font-weight: 700; color:#131313; } .d_pop2 .wrap .box .img_box .p_box p{ font-size: 18px; line-height: 1.5em; color:#333333; } .d_pop2 .wrap .box .d_tit strong{ font-weight: 700; } .d_pop .d_ul{ display: flex; gap: 120px; position: relative; } .d_pop .d_ul:after{ content:""; display: block; width: 1px; height: 100%; background-color: #D9E3E8; position: absolute; left: 50%; top: 0; } .d_pop .d_ul li{ width: 50%; } .d_pop .d_ul li .img img{ display: block; width: 100%; } .d_pop .d_ul li svg{ width: 100%; height: auto; margin-top: 20px; display: block; } .d_pop .d_ul li .d_tit2{ margin-bottom: 30px; } .d_pop .d_ul li .d_tit2 strong{ font-size: 36px; line-height: 50px; font-weight: 400; color: #000; } .d_pop .d_ul li .txt{ margin-top: 20px; padding: 0; display: flex; flex-flow: column; gap: 20px; } .d_pop .d_ul li .txt strong{ font-size: 19px; line-height: 1.5em; color:#666666; display: block; } .d_pop .d_ul li .txt strong b{ color:#000000; } .d_pop .d_ul li .txt strong span{ color: #0090FF; font-weight: 700; } .d_pop .d_ul li .txt em{ displaY: block; font-size: 18px; line-height: 1.5em; color:#666666; } .d_pop .d_ul li .txt em b{ color: #0090FF; } .d_pop .d_ul li .info_p{ font-size: 16px; line-height: 19px; font-weight: 300; color:#999999; } .d_pop4 .d_ul li .txt strong span{ color: #999999; font-weight: 400; } .d_pop4 .d_ul li .imgs{ margin-top: 30px; } .d_pop4 .d_ul li .imgs img{ display: block; width: 100%; } .d_pop4 .box{ max-height: 90%; overflow-y: scroll; } .d_pop4 .box .close_b{ right: 20px; top: 20px; transform: translateX(0%); } .d_pop5 .box > div svg { display: block; margin: 0 auto; margin-bottom: 30px; } .d_pop5 .txt{ text-align: center; margin-top: 0; margin-bottom: 20px; } .d_pop5 .txt strong{ color: #000 !important; font-weight: 700; } .d_pop5 .info_p{ text-align: center; margin-top: 110px; font-size: 16px; font-weight: 300; color: #999999 } .d_pop4 .benefits{ display: flex; flex-flow: column; gap: 30px; margin-top: 120px; } .d_pop4 .benefits .d_tit2 strong{ display: block; text-align: center; font-size: 36px; font-weight: 700; color:#000000; } .d_pop4 .benefits .img img{ width: 100%; display: block; } /* 효과 */ .sub_visual .inner > strong{ transition: transform .8s, opacity .8s; transform: translateX(40px); opacity: 0; } .sub_visual .inner > ul{ transition: transform .8s, opacity .8s; transform: translateX(40px); opacity: 0; transition-delay: .2s; } .sub_visual.on .inner > strong{ transform: translateX(0); opacity: 1; } .sub_visual.on .inner > ul{ transform: translateX(0); opacity: 1; } #sub .img{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 1.2s; } #sub .img img{ transform: scale(1.1); transition: transform 2s; } #sub .on .img{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } #sub .on .img img{ transform: scale(1); } #sub .ac .img{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } #sub .ac .img img{ transform: scale(1); } .ani01{ transition: transform 1s, opacity 1s; transform: translateY(40px); opacity: 0; } .on .ani01{ transform: translateY(0); opacity: 1; } .delay01{ transition-delay: .2s; } .delay02{ transition-delay: .4s; } .delay03{ transition-delay: .6s; } .delay04{ transition-delay: .8s; } .delay05{ transition-delay: 1s; } #sub .nb_box{ transition: transform 1s, opacity 1s; transform: translateY(40px); opacity: 0; } #sub .nb_box.ac{ transform: translateY(0); opacity: 1; } #sub .on .nb_box{ transform: translateY(0); opacity: 1; } @media (max-width: 1540px) { .sub_pop .wrap .close_b{ right: 0; top: -10px; transform: translateY(-100%); } .sub_pop .wrap{ padding-top: 50px; } } @media (max-width: 1440px) { .inner{ width: 100%; padding: 0 20px; } #sub.member .inner{ gap: 20px; } #sub .br{ display: none; } #sub.hdl .qna{ width: 50%; } *{ word-break: keep-all !important; } #sub.hdl02 .con05 .h01 .img{ width: 50%; } #sub.hdl02 .con05 .h01 .arrow{ width: 50%; } #sub.hdl02 .con05 .h01 .arrow ul li{ width: 33.333333%; } #sub.hdl02 .con05 .h01 .arrow ul li img{ width: 100%; } #sub.hdl02 .con06 .graph .wrap2{ gap: 20px; } #sub.hdl02 .con06 .graph .wrap2 ul{ width: calc(100% - 445px);} #sub.hdl02 .con06 .graph .wrap2 ul li{ width: 33.33333%; } #sub.hdl02 .con06 .graph .wrap2 ul li svg{ width: 100%; height: auto;} #sub.hdl03 .con02 .wrap .txt{ width: 50%; } .sub_pop .box .close_b{ right: 0; top: -10px; transform: translate(0,-100%);z-index: 111} .sub_pop .box .close_b svg{ width: 32px; height: auto; } .sub_pop .box{ max-height: 90vh; overflow-y: scroll; } .sub_pop .box .close_b{ right: 20px; top: 20px; transform: translate(0,0); } #sub.direction .con02 .img{ width: 50%; } #sub.direction .con02 .img img{ width :100%; border-radius: var(--border-radius) } #sub.direction .con02 .txt{ width: 50%; } #sub.direction .con02 .txt .box p{ font-size: 14px; } #sub.direction .con02 .txt .box svg{ margin-bottom: 6px; } #sub.direction .con02 .txt .box svg{ height: 32px; width: auto; } #sub.direction .con02 .txt > .box{ padding-bottom: 12px; } #sub.direction .con02 .txt .wrap{ gap: 20px; } #sub.direction .con02 .txt .box ul li{ font-size: 14px; } #sub.direction .con02 .txt .box ul{ gap: 4px; } #sub.board .b_top .b_cate ul li a{ padding: 0 20px; font-size: 14px; } #sub.museum .con03 .wrap .m_info{ width: calc(50% - 10px); } #sub.museum .con03 .wrap .map{ position: static; transform: translate(0,0); width: 100%; } #sub.museum .con03 .wrap .map img{ max-width: 100%; margin: 0 auto; width: auto; } #sub.museum .con03 .wrap { display: flex; gap: 20px; flex-flow: wrap; align-items: flex-start; } .d_pop .wrap .box{ width: 95%; } .d_pop1 .wrap .box .img_box{ height: auto; padding: 20px 0;} } @media (max-width: 1200px) { #sub.sear .box{ padding: 30px; } #sub.sear .box strong{ font-size: 20px; margin-bottom: 10px; } #sub.sear .box p{ font-size: 14px; } #sub.sear .box .go_btn a{width: 100%; } #sub .st02{ font-size: 20px; } #sub .p01{ font-size: 16px; line-height: 1.5em; } #sub .p02{ font-size: 18px; } #sub .st01{ font-size: 24px; } #sub .s_tit{ gap: 10px; } #sub.hdl .qna{ gap: 20px; } .sub_nav .sub_n .loc_li a{ height: 40px; font-size: 14px; } #sub .share a .de strong{ font-size: 14px; } #sub .share a{ height: 40px; width: 120px; } #sub .share a .hover strong{ font-size: 14px; } #sub.hdl .con01 .inner{ gap: 20px; } #sub.hdl .img_ul li .txt{ padding: 20px 0; } #sub.hdl .img_ul{ gap: 20px; } #sub.hdl .h_table > div > div{ height: 50px; } #sub.hdl .h_table .tb .h_th{ font-size: 16px; } #sub.hdl .h_table .cate > div{ font-size: 16px; } #sub.hdl .h_table .tb > div > p{ font-size: 14px; line-height: 1.5em; } #sub.hdl .h_table .tb .h_th img{ width: 40px; } #sub.board .r_list > ul{ gap: 40px 20px; } #sub.board .r_list > ul > li{ width: calc(33.33333333333333% - 13.33333333333333px); } #sub.center .con02 .img{ width: 50%; } #sub.center .con02 .inner > .txt{ width: 50%; } #sub.center .con02 .inner{ gap: 20px; } #sub.board .b_list table th{ height: 40px; font-size: 14px; } #sub.board .b_list table td{ height: 40px; font-size: 12px; } #sub.board .b_list table td button{ height: 28px; width: 60px; font-size: 12px; } #sub.calculator .con01 form .top dl dd{ font-size: 18px; } #sub.calculator .con01 form .top p{ line-height: 1.5em; min-height: auto; text-align: center; } #sub.calculator .con01 form{ width: 50%; } #sub.calculator .con01 .inner{ gap: 40px; } #sub.calculator .con01 form .box{ padding: 20px; margin-top: 12px; } #sub.board .f_box > strong{ font-size: 14px; width: 110px; } #sub.board .f_box .small{ height: 38px; font-size: 14px; padding-left: 15px; } #sub.calculator .con01 form .box ul{ gap: 10px; } #sub.board .f_box.right:after{ font-size: 12px; } #sub.calculator .con01 form .box .go_btn{ margin-top: 12px; } #sub.calculator .con01 form .box .go_btn a{ font-size: 14px; height: 40px; padding: 0 30px; } #sub.calculator .con01 form .box .go_btn a:hover{ padding: 0 40px; } #sub.mypage .con02 ul li{ width: calc(50% - 10px); } #sub.mypage .con02 ul{ flex-flow: wrap; } #sub.mypage .con02 ul li a{ height: 100px; } #sub.mypage .con02 ul li a strong{ font-size: 15px; } #sub.mypage .con02 ul li a .icon > svg{ width: 40px; height: auto; display: block; } #sub.mypage .con01 .code{ padding: 0 20px; } #sub.intro .con01 .inner{ gap: 10px; } #sub.intro .con01 p{ font-size: 14px; line-height: 1.5em; } #sub.intro .con02 .nb_box .grade{ gap: 20px; width: 100%; } #sub.intro .con02 .nb_box .grade li{ width: 25%; } #sub.intro .con02 .nb_box .grade li .txt p{ font-size: 16px; line-height: 1.5em; } #sub .nb_box{ gap: 20px; } #sub.friend .con01 .bt .give{ gap: 20px; } #sub.friend .con01 .bt{ gap: 40px; } #sub.friend .con01 .bt > div{ width: calc(50% - 20px); } #sub.point .con01 .p_list ul{ gap: 20px; } #sub.point .con01 .p_list ul li{ width: calc(25% - 15px); } #sub.found .con03 .hdl img:nth-child(1){ right: -70px; width: 300px; } #sub.found .con03 .hdl img:nth-child(2){ right: 25%; } #sub.found .con03 strong{ font-size: 30px; line-height: 1.5em; display: block; } #sub.intro .con02 .inner{ gap: 20px; } #sub.found .con02 ul{ padding: 20px; padding-bottom: 40px; } #sub.found .con02 ul li{ width: calc(20% - 16px); } #sub.found .con02 ul li strong{ font-size: 13px; padding: 4px 8px; } #sub.found .con02 ul{ gap: 20px; } #sub.disease .tabs ul li a svg{ width: 80%; margin: 0 auto; height: auto; } #sub.disease .con01 .wrap .center{ position: relative; transform: translate(0,0) scale(1.3); left: auto; top: auto; width: 60%;margin-top: 40px; margin-bottom: 40px; } #sub.disease .con01 .wrap .center:after{ background-size: 100% 100%; } #sub.disease .con01 .wrap .center img{ width: 100%; display: block; } #sub.disease .con01.on .wrap .center{ transform: translate(0,0) scale(1); } #sub.disease .con01 .wrap{ flex-flow: wrap; justify-content: center; gap: 20px; } #sub.disease .con01 .title svg{ display: none; } #sub.disease .con01 .wrap .list{ width: calc(50% - 10px); } #sub.disease .con01 .wrap .list > div .tit .left img{ width: 60px; height: auto; } #sub.disease .con01 .wrap .list > div .tit .left strong{ font-size: 18px; } #sub.disease .con01 .wrap .list > div .tit:after{ display: none; } #sub.disease .con01 .wrap .list .num svg{ height: 40px; width: auto; } #sub.disease .con01 .wrap .list > div .tit{ padding-bottom: 8px; margin-bottom: 8px; } #sub.disease .con01 .wrap .list > div .txt p{ font-size: 12px; margin-bottom: 8px; } #sub.disease .con01 .wrap .list > div .txt dl dt{ font-size: 12px; margin-bottom: 3px; } #sub.disease .con01 .wrap .list > div .txt dl dd{ font-size: 12px; } #sub.disease .con01 .wrap .list > div{ padding: 22px; border-radius: 20px; } } @media (max-width: 980px) { #sub.board.board_w .sub_visual .inner > p{font-size: 15px;word-break: keep-all; line-height: 1.5} #sub.board.board_w .sub_visual .inner > p br{display: none} #sub.member .inner{ flex-flow: column; } #sub.member .inner > div{ width: 100%; } #sub.sear .box strong{ font-size: 18px; margin-bottom: 6px; } :root { --border-radius: 10px; } #sub.sear .box p{ padding-bottom: 10px; } #sub.sear .box .go_btn{ margin-top: 10px; } #sub.result .box_wrap{ width: 100% !important; } #sub.member .sub_con{ padding-top: 140px; } #sub.member .sub_con .st1{ font-size: 30px; } #sub.member .inner{ gap: 20px; } #sub.member .sub_con .st2{ font-size: 16px; } #sub.join01 .per_wrap{ gap: 8px; } #sub.join01 .per_wrap p{ padding: 20px; font-size: 15px; } #sub.member .sub_con .pers label{ font-size: 14px; } #sub.join01 .per_wrap:nth-child(4) .pers label{ font-size: 18px; } #sub.join01 .per_wrap:nth-child(5) .pers label{ font-size: 18px; } #sub.member .sub_con{ padding-bottom: 120px; } #sub.hdl .con01 .inner{ flex-flow: column; } #sub.hdl .con01 .inner > div{ width: 100%; } .sub_nav .sub_n{ justify-content: flex-start; padding-left: 15px; } .sub_nav .sub_n .loc_li a{ font-size: 12px; } #sub .sub_con .con01{ padding-top: 40px; padding-bottom: 80px; } #sub .info_p{ font-size: 12px; margin-top: 20px; } #sub .in_pd{ padding-top: 80px; } #sub .color_bg{ padding-top: 80px; } #sub .con_w{ padding-bottom: 80px; } #sub.hdl .h_table .tb > div > p{ font-size: 12px; } #sub.hdl .h_table .tb .h_th{ font-size: 12px; } #sub.hdl .h_table .cate > div{ font-size: 12px; } #sub .in_pd2{ padding-bottom: 40px; } #sub.hdl01 .con04 .h01{ flex-flow: column; gap: 20px; } #sub.hdl01 .con04 .h01 > div{ width: 100%; } #sub.hdl01 .con04 .h01 .s_tit{ padding-left: 0; } #sub.hdl01 .con04 .h02{ flex-flow: column; padding: 20px; } #sub.hdl01 .con04 .h02 > div{ width: 100%; } #sub.hdl01 .con04 .h02 .txt{ padding-left: 0; } #sub.hdl .wrap .tag_ul li .tag{ height: 40px; } #sub.hdl .wrap .tag_ul li .tag strong{ font-size: 16px; } #sub.hdl .st_box{ padding: 20px 0; } #sub.hdl .wrap .tag_ul{ gap: 20px; flex-flow: column; } #sub.hdl .wrap .tag_ul li{ width: 100%; } #sub.hdl .wrap .tag_ul li .txt{ margin-top: 15px; } #sub.hdl01 .con07 .wrap{ flex-flow: column; gap: 20px; } #sub.hdl .qna{ width: 100%; } #sub.hdl01 .con07 .wrap > div{ width: 100%; } #sub .st01{ font-size: 18px; } #sub.hdl01 .con07 .st01:after{ width: 180px; height: 2px; bottom: -1px; } #sub.hdl01 .con07 .st01{ margin-bottom: 20px; padding-bottom: 10px; } #sub.hdl02 .con06 .graph .wrap2{ flex-flow: column; gap: 20px; } #sub.hdl02 .con06 .graph .wrap2 .all{ width: 100%; height: auto; padding: 30px 0; } #sub.hdl02 .con06 .graph .wrap2 ul{ width: 100%; } #sub.hdl03 .con01 .circle_box{ padding: 10px 20px; font-size: 24px; } #sub.hdl03 .step_t span{width: 32px; height: 32px; font-size: 16px; } #sub.hdl03 .step_t .num:before{ width: 60px; } #sub.hdl03 .step_t .num{ margin-bottom: 10px; } #sub.hdl03 .step_t strong{ font-size: 18px; line-height: 1.5em; margin-bottom: 6px; } #sub.hdl03 .step_t p{ font-size: 14px; } #sub.hdl03 .step_t{ margin-bottom: 20px; } #sub.hdl03 .con03 .box > strong{ margin-bottom: 20px; } #sub.hdl03 .box .h_table2 .tb > div{ height:50px; } #sub.hdl03 .box .h_table2 .tb .h_th{ font-size: 16px; } #sub.hdl03 .box .h_table2 .tb > div > p{ font-size: 14px; } #sub.hdl03 .box .pb{ margin-top: 20px; padding: 8px 20px; font-size: 12px; } #sub.hdl03 .box .h_table3 .box2 .th{ height: 50px; font-size: 16px; } #sub.hdl03 .box .h_table3 .box2 .th strong{ font-size: 16px; } #sub.hdl03 .con05 .box > strong{ margin-bottom: 20px; } #sub.hdl03 .con07 ul li{ width: calc(50% - 10px); } #sub.hdl03 .con07 ul{ gap: 30px 20px; } #sub.hdl03 .con07 ul li .cont p{ font-size: 12px; line-height: 1.5em; height: 36px; } #sub.hdl03 .con07 ul li .cont{ padding: 12px; padding-bottom: 30px; } #sub.hdl03 .con07 .st01{ margin-bottom: 20px; } #sub.hdl03 .con07 ul li .info .profile img{ width: 80px; height: auto; } #sub.hdl03 .con07 ul li .info .txt strong{ font-size: 16px; } #sub.hdl03 .con07 ul li .info{ gap: 8px; } #sub.hdl03 .con07 ul li .info .txt{ gap: 4px; } #sub.hdl03 .con07 ul li .info .txt p{ font-size: 12px; } #sub.board .g_list ul{ gap: 40px 20px; } #sub.board .g_list ul li{ width: calc(50% - 10px); } #sub.board .g_list ul li .txt{ padding: 15px; } #sub.board .g_list ul li .txt strong{ font-size: 16px; margin-bottom: 4px; } #sub.board .g_list ul li .txt p{ font-size: 12px; } #sub.board .g_list ul li a .bt{ gap: 4px; } #sub.board .b_top .sort ul li a{ font-size: 12px; } #sub.board .b_top .sort{ width: 200px; height:40px; } #sub.board .b_top .search{ height: 40px; width: 300px; } #sub.board .b_top .search select{ width: 70px; font-size: 12px; } #sub.board .b_top .search input{ font-size: 12px; } #sub.board .b_top .search button svg{ width: 40px; height: auto; } #sub.board .paging{ margin-top: 30px; } #sub.board .paging ul li{ width: 32px; height: 32px; } #sub.board .paging ul{ gap: 4px; } #sub.board .paging ul li a{ font-size: 12px; background-size: 100% 100% !important; } #sub.board .r_list > ul > li a .info .profile img{ width: 100%; } #sub.board .r_list > ul > li a .info .profile{ width: 120px; height: 120px; } #sub.board .r_list > ul > li a .info .txt{ gap: 4px; } #sub.board .r_list > ul > li a .info{ padding: 20px; } #sub.board .r_list > ul > li a .info .txt strong{ font-size: 15px; } #sub.board .r_list > ul > li a .info .txt p{ font-size: 13px; } #sub.board .r_list > ul > li a .info .txt em{ font-size: 12px; line-height: 1.5em; } #sub.board .r_list > ul > li a .info ul li{ font-size: 12px; line-height: 1.5em; } #sub.board .r_list > ul > li a .info ul li:after{ top: 7px; } #sub.board .r_list > ul > li a .info ul{ gap :4px; } #sub.board .r_list > ul > li a button{ font-size: 14px; height: 40px; width: 80px;} #sub.board .r_list > ul > li a:hover button{ width: 120px; } #sub.board .r_list > ul > li a{ gap: 8px; } #sub.board.re_view dl > dt{ font-size: 16px; margin-bottom: 10px; padding-bottom: 10px; } #sub.board.re_view dl > dt:after{ width: 28px; } #sub.board.re_view .career > dl > dd > ul > li{ font-size: 12px; line-height: 1.5em; padding-left: 8px; } #sub.board.re_view .career > dl > dd > ul > li:after{ top: 7px; } #sub.board.re_view .career > dl > dd > ul{ gap: 4px; } #sub.board.re_view .career{ gap: 40px 20px; } #sub.board.re_view .g_list ul li .txt strong{ font-size: 14px; } #sub.board.re_view .con02 .st01{ margin-bottom: 20px; } #sub.board.re_view .career > .dl02 > dd > .g_list > ul{ gap: 30px 20px; } #sub.board.re_view .career > .dl02 > dd > .g_list > ul > li{ width: calc(50% - 10px); } .sub_pop .box .v_wrap iframe{ border-radius: 10px 10px 0 0; } .sub_pop .box .txt{ padding: 30px 20px; } .sub_pop .box .txt .cate p{ font-size: 12px; } .sub_pop .box .txt .cate{ padding: 4px 12px; margin-bottom: 4px; } .sub_pop .box .txt strong{ font-size: 15px; line-height: 1.5em; } #sub.board.rev03 .con02 table th{ font-size: 12px; height: 40px; padding-left: 10px; } #sub.board.rev03 .con02 table td{ height: 40px; font-size: 12px; padding-left: 10px; } #sub.board.rev03 .con02 table td strong{ font-size: 12px; } #sub.board.re_view .thesis2 .dl02 .list{ gap :12px; } #sub.board.re_view .thesis2 .dl02 .list .txt strong{ font-size: 16px; } #sub.board.re_view .thesis2 .dl02 .list .txt{ gap: 8px; } #sub.board.re_view .thesis2 .dl02 .list .txt p{ font-size: 13px; } #sub.center .con03 ul{ gap: 30px 20px; } #sub.center .con03 ul li{ width: calc(33.333333333% - 13.33333333333333px); } #sub.center .con02 .inner > .txt{ padding: 20px; } #sub .st03{ font-size: 18px; padding-bottom: 10px; margin-bottom: 10px; gap: 8px; } #sub .st03 span{ font-size: 12px; } #sub.center .con01{ padding: 40px 0 !important; } #sub.center .con01 .flag img{ width: 80px; } #sub.center .con01 .inner .st02{ margin-top: 8px; } #sub.center .con01 .inner p{ font-size: 14px; padding: 8px 20px; margin-top: 8px; } #sub.center .con04 .box ul li .txt p{ font-size: 14px; line-height: 1.5em; } #sub.center .con04 .box ul li{ gap: 10px; } #sub.center .con04 .box ul li .img img{ width: 180px; } #sub.center .con04 .box ul li .txt{ width: calc(100% - 190px); } #sub.center .con04 .box > button svg{ margin-right: 10px; width: 28px; height: auto; } #sub.center .con04 .box ul li{ padding: 18px 0; } #sub.center .con04 .box > button{ height: 60px; } #sub.center .con04 .box > button strong{ font-size:16px; } #sub.center .con04 .wrap{ gap: 8px; } #sub.direction .con01 .m_map{ height: 280px; } #sub.direction .con02 .inner{ gap: 20px; flex-flow: column; } #sub.direction .con02 .inner > div{ width: 100%; } #sub.direction .con02 .txt{ padding: 20px; gap: 12px; } #sub.direction .con03{ padding: 50px 0; } #sub.direction .con03 p{ font-size: 16px; margin-bottom: 8px; } #sub.direction .con03 strong{ font-size: 20px; } #sub.direction .con02{ padding-top: 0; } #sub.ox .con01 .btn{ gap: 20px; margin-top: 15px; } #sub.ox .con01 .btn button svg{ width: 100px; height: auto; } #sub.ox .con01 .inner > strong{ margin-bottom: 20px; font-size: 18px; } #sub.ox .con01 .inner > span{ width: 32px; height: 32px; font-size: 14px; margin-bottom: 10px; } #sub.board .b_top .b_cate ul li a{ height: 40px; } #sub.board .b_top .b_cate ul{ gap: 4px; flex-flow: wrap; } #sub.board .b_top .b_cate{ width: 100%; } #sub.board .b_top{ flex-flow: column; gap: 8px !important; } #sub.mypage .con01 .g_con{ margin-top: 12px; gap: 8px; } #sub.mypage .con01 .g_con img{ width: 40px; height: 40px !important; } #sub.mypage .con01 .grade .g_con p{ font-size: 14px; } #sub.mypage .con01 .grade .points{ padding: 5px 14px; font-size: 12px; } #sub.mypage .con01 .g_con{ height: 40px; } #sub .gt{ font-size: 14px; } #sub.mypage .con01 .dash .g_con strong{ font-size: 18px; } #sub.mypage .con01 .dash .point{ padding-left: 15px; } #sub.mypage .con01 .dash .coupon{ padding-left: 15px; } #sub.mypage .con01 .dash{ padding: 20px; } #sub.mypage .con01 .code{ height: 60px; gap: 20px; } #sub.mypage .con01 .code dl dt{ font-size: 14px; } #sub.mypage .con01 .code dl dd{ gap: 8px; } #sub.mypage .con01 .code dl dd p{ font-size: 12px; } #sub.mypage .con01 .code dl dd button{ width: 60px; height: 28px; font-size: 12px; } #sub.point .con01 .p_list ul li a .txt strong{ font-size: 14px; width: 100%; } #sub.point .con01 .p_list ul li a .txt{ padding: 12px 0; } #sub.point .con01 .p_list ul li a .txt strong{ margin-bottom: 10px; } #sub.point .con01 .p_list ul li a .txt .minus{ margin-top: 10px; } #sub.point .con01 .p_list ul li a .txt .minus p{ font-size: 12px; } #sub.point .con01 .p_list ul li a .txt .minus span{ width: 100%; height: 28px; font-size: 12px; } #sub.point .con01 .color_bg .flag_n ul li a .flag img{ width: 50px; } #sub.point .con01 .color_bg .flag_n ul li p{ font-size: 14px; margin-top: 6px; } #sub.point .con01 .color_bg .flag_n{ margin-bottom: 20px; } #sub.point .con01 > p{ font-size: 14px; margin-top: 10px; } #sub.point .con01 .color_bg{ margin-top: 40px; padding-top: 40px; padding-bottom: 40px; } #sub.museum .con01 .txt p{ font-size: 14px; line-height: 1.5em; } #sub.museum .con01 .txt{ gap: 10px;margin-bottom: 20px; } #sub.museum .con01 .t_box p{ font-size: 16px; line-height: 1.5em; } #sub.museum .con01 .t_box{ padding: 15px 10px; } #sub.museum .con02 .c01 ul{ padding: 0 20px; } #sub.museum .con02 .c01 ul li i{ width: 80%; margin: 0 auto; } #sub.museum .con02 .c01 ul li img{ width: 100%; } #sub.museum .con02 .c01 ul li{ padding: 20px; border-radius: 20px; } #sub.museum .con02 .c01 ul li .txt strong{ font-size: 20px; } #sub.museum .con02 .c01 ul li .txt em{ font-size: 14px; margin-top: 4px; } #sub.museum .con02 .c01 ul li .txt p{ font-size: 12px; line-height: 1.5em; margin-top: 10px; } #sub.museum .con02 .c02 ul{ gap: 20px; } #sub.museum .con02 .c02 ul li{ width: 33.3333333%; } #sub.found .con01{ padding-top: 400px; } #sub.found .con01 .age{ width: 220px; height: 220px; gap: 8px; } #sub.found .con01 .age > span{ font-size: 14px; padding: 4px 12px; } #sub.found .con01 .age > strong{ font-size: 18px; } #sub.found .con01 .age > strong span b{ font-size: 24px; } #sub.found .con01 .age > strong span{ transform: translateY(-2px); } #sub.found .con01 .age:after{ background-size: 100% 100%; } #sub.found .con01 .however strong{ font-size: 16px; } #sub.found .con01 .however .line{ height: 50px; } #sub.found .con01 .however{ margin: 30px 0; } #sub.found .con01 .txt p{ font-size: 14px; line-height: 1.tem; } #sub.found .con01 .txt p b{ font-size: 17px; } #sub.found .con01 .txt{ margin-top: 30px; gap: 20px; } #sub.poly01 .con01 .c01 .txt{ padding-left: 0; } #sub.poly01 .con01 .c01{ gap: 20px; } #sub.poly02 .con01 .inner .mark{ width: auto; padding: 20px; max-height: auto; } #sub.poly01 .con01 .c01 .txt{ gap: 10px; } #sub.poly01 .con01 .c02{ padding-top: 40px; } #sub.poly02 .con01 .inner .list{ width: 100%; } #sub.poly02 .con01 .inner{ flex-flow: column; align-items: center; } #sub.poly02 .con01 .inner .mark img{ width: 80px; } #sub.poly02 .con01 .inner .flag svg{ width: 80px; height: auto; } #sub.poly02 .con01 .inner .flag strong{ font-size: 14px; width: 70px; height:32px; } #sub.poly02 .con01 .inner .list > dl dt svg{ width: 32px; height: auto; } #sub.poly02 .con01 .inner .list > dl dd strong{ font-size: 14px; margin-bottom: 4px; } #sub.poly02 .con01 .inner .list > dl dd p{ font-size: 12px; } #sub.poly02 .con01 .inner .list > dl{ padding: 12px; } #sub.poly02 .con01 .inner .list{ gap: 8px; } #sub.poly02 .s_tit{ margin-bottom: 20px; } #sub.poly02 .con01 .inner{ gap: 10px; } #sub.poly02 .con02 .mate{ gap: 10px; } #sub.poly02 .con02 .mate{ padding: 15px; } #sub.poly02 .con02 .mate strong{ font-size: 14px; margin-bottom: 4px; } #sub.poly02 .con02 .mate p{ font-size: 12px; line-height: 1.5em; } #sub.poly02 .con02 .mate .img{ width: 50%; } #sub.poly02 .con02 .mate .txt{ width: 50%; } #sub.poly02 .con02 .cert{ padding: 20px; } #header.ac:after{display: none} #sub.board.board_w .sub_visual .inner > p{font-size: 13.5px} #sub.board .b_list table tr.answer td{padding: 0px} } /* @media (max-width: 800px) { #sub.member .sub_con .wrap{ width: 100%; padding: 0 20px; } #sub.member .sub_con .st1{ font-size: 30px; } #sub.member .sub_con .wrap form{ margin-top: 20px; } #sub .in_box{ height: 40px; padding-left: 20px; font-size: 14px; } #sub.member .sub_con .wrap form{ gap: 6px; } #sub.member .sub_con .wrap form .id_chk{ margin: 10px 0; } #sub.member .sub_con .wrap .id_chk{ padding-left: 26px; } #sub.member .sub_con .wrap .id_chk label{ font-size: 14px; } #sub.member .form_btn{ height: 50px; font-size: 16px; } #sub.member .sub_con .wrap form .btn_wrap ul .line{ height: 8px; } #sub.member .sub_con .wrap form .btn_wrap ul{ gap: 8px; } #sub.member .sub_con .wrap form .btn_wrap ul li a{ font-size: 12px; display :block; } #sub.member .sub_con .wrap form .btn_wrap{ margin: 10px 0; } #sub.member .sns_login ul{ gap:12px; } #sub.member .sns_login ul li svg{ width: 32px; height: auto; } .chk_point .box{ width: 100%; padding: 30px 20px; gap: 10px; } .chk_point .box svg{ width: 60px; height: auto; } .chk_point .box > strong{ font-size: 16px; } .sub_pop .wrap{ padding: 0 20px; } .chk_point .box .p_box{ font-size: 12px; padding: 10px 0; } .chk_point .box .p_info{ font-size: 12px; } .go_btn a{ font-size: 14px; height: 40px; padding: 0 25px } #sub.sear .box{ padding: 20px; } #sub.sear .box strong{ font-size: 15px; } #sub.sear .box p{ font-size: 12px; } #sub.result .box_wrap{ padding: 20px !important; } #sub.sear .stst{ font-size: 15px; } #sub.result .info{ margin-top: 10px; } #sub.sear .pp{ font-size: 12px; } #sub.result .info .txt_b strong{ font-size: 14px; } #sub.result .info .txt_b{ height: 40px; margin-bottom: 10px; } #sub.result .info p{ font-size: 12px; } #sub.result .wrap .go_btn{ margin-top: 10px; gap: 6px; padding-top: 10px; } #sub.result .flex_t{ gap: 6px; } #sub.result .flex_t svg{ width: 60px; height: auto; } #sub.result form{ margin-top: 10px !important; } #sub.result03 .flex_t .stst{ font-size: 15px; } #sub.member .sub_con{ padding-top: 100px; } #sub.member .sub_con .st1{ font-size: 20px; } #sub.member .sub_con .st2{ font-size: 14px; } #sub.join01 .per_wrap p{ padding: 15px; font-size: 12px; height: 120px; } #sub.member .sub_con .pers label{ font-size: 12px; } #sub.member .sub_con .pers{ padding-left: 24px; } #sub.join01 .per_wrap:nth-child(4){ padding: 20px 0; } #sub.join01 .per_wrap:nth-child(4) .pers label{ font-size: 14px; } #sub.join01 .per_wrap:nth-child(5) .pers label{ font-size: 14px; } #sub.join01 .go_btn{ gap: 8px; } .go_btn{ margin-top: 20px; } #sub.member .sub_con{ padding-bottom: 80px; } #sub.join .join_form ul li .f_wrap button{ height: 40px; font-size: 14px; } #sub.join .join_form ul li > strong{ padding-left: 20px; font-size: 14px; margin-bottom: 6px; } #sub.join .join_form ul{ gap: 20px; } #sub.join .join_form ul li .f_wrap button{ width: 100px; } #sub.join .join_form ul li .error{ padding-left: 20px; font-size: 12px; } #sub.join .join_form{ margin-bottom: 30px; margin-top: 30px !important; } #sub .s_tit{ gap: 6px; } #sub .st01{ font-size: 16px; } #sub .p01{ font-size: 12px; } #sub.hdl .img_ul{ flex-flow: column; gap: 20px; } #sub.hdl .img_ul li{ width: 100%; } #sub .color_bg{ padding-top: 60px; } #sub .con_w{ padding-bottom: 60px; } #sub .in_pd{ padding-top: 60px; } #sub .st02{ font-size: 16px; gap: 4px; } #sub .st02 span{ font-size: 12px; } #sub.hdl .h_table .tb > div > p{ font-size: 11px; } #sub.hdl .h_table .tb > div > p br{ display: none; } #sub.hdl .qna dl dd{ padding-left: 10px; } #sub.hdl .qna dl{ gap: 10px; } #sub.hdl .qna dl dt svg{ width: 30px; height: auto; } #sub.hdl .qna{ gap: 10px; } #sub .p02{ font-size: 16px; } .sub_visual{ height: 260px; } .sub_visual .visual_img img{height: 100%; } .sub_visual{ padding-top: 40px; } .sub_visual .inner{ gap: 12px; } .sub_visual .inner ul{ gap: 4px; } .sub_visual .inner ul li{ font-size: 12px; } .sub_visual .inner > strong{ font-size: 24px; } .sub_nav button{ display :block; height: 40px; width: auto; padding: 0 20px; padding-right: 50px; text-align: left; background: url('/img/sub/select_arrow.png') right 20px center no-repeat; background-color: #a6bdc6; border-radius: 60px; color: #fff; font-size: 14px; } .sub_nav .inner{ padding: 10px 20px; } .sub_nav.no_fix{ position: relative; z-index: 10; } .sub_nav .sub_n{ flex-flow: column; gap: 0; position: absolute; left: 20px; transform: translateY(4px);width: 220px; padding-left: 0; border-radius: 10px; border: 1px solid #D9E3E8; padding: 12px; background-color: #fff; display: none; } .sub_nav .sub_n .loc_li a{ background-color: transparent !important; color: #666; text-align: left; padding-left: 20px; justify-content: flex-start; height: 32px; } .sub_nav .sub_n .loc_li{ width: 100%; max-width: auto; } .sub_nav .sub_n .loc_li.on a:after{ display: none; } .sub_nav .sub_n .loc_li.on a{ box-shadow: none; } #sub.hdl02 .con03 .vs{ gap: 6px; margin-top: 20px; margin-bottom: 20px; } #sub.hdl02 .con03 .vs > div > strong{ font-size: 14px; } #sub.hdl02 .con03 .vs > div > .img img{ width: 40px; } #sub.hdl02 .con03 .vs > div{ gap: 6px; } #sub.hdl02 .con03 .wrap{ padding-bottom: 15px; } #sub.hdl02 .con04 .img_ul2 ul{ gap: 20px; flex-flow: column; } #sub.hdl02 .con04 .img_ul2 ul li{ width: 100%; } #sub .p03{ font-size: 12px; line-height: 1.5em; } #sub.hdl02 .con04 .st02{ margin-bottom: 20px; } #sub.hdl02 .con04 .img_ul2 li .txt{ margin-top: 10px; } #sub.hdl02 .con05 .h01{ gap: 20px; flex-flow: column; } #sub.hdl02 .con05 .h01 > div{ width: 100% !important; } #sub.hdl02 .con05 .p_box{ padding: 20px; margin-top: 20px; margin-bottom: 30px; } #sub.hdl02 .con05 .wrap .st01{ margin-bottom: 20px; } #sub .info_p2{ font-size: 12px; margin-top: 12px; } #sub .img{ width: 100%; } #sub.hdl02 .con06 .line span:nth-child(1){ display: none; } #sub.hdl02 .con06 .line span:nth-child(2){ display: none; } #sub.hdl02 .con06 .exercise ul li{ width: calc(25% - 15px); } #sub.hdl02 .con06 .exercise ul{ flex-flow: wrap; gap: 20px; } #sub.hdl02 .con06 .exercise ul li:before{ display: none; } #sub.hdl02 .con06 .exercise ul li .img{ margin-bottom: 10px; } #sub.hdl02 .con06 .st_box{ padding: 12px 30px; margin-bottom: 20px; } #sub.hdl02 .con06 .exercise ul li .txt strong{ font-size: 14px; } #sub.hdl02 .con04 .img_ul2 ul:after{ display: none; } #sub.hdl02 .con06 .st01{ margin-bottom: 20px; } #sub.hdl02 .con06 .exercise .p01{ margin-top: 20px; } #sub.hdl02 .con06 .graph{padding-top: 40px; } #sub.hdl02 .con06 .graph > strong{ font-size: 18px; margin-bottom: 20px; } #sub.hdl02 .con06 .graph .wrap2 .all svg{ width: 33.3333%; height: auto; } #sub.hdl02 .con07 .c_tit strong{ font-size: 16px; } #sub.hdl02 .con07 .c_tit { gap: 4px; padding-bottom: 12px; } #sub.hdl02 .con07 .box{ padding: 20px 0; flex-flow: column; gap: 20px; } #sub.hdl02 .con07 .box > div{ width: 100% !important; } #sub.hdl02 .con07 .box .txt{ padding-right: 0; } #sub.hdl02 .con07 .box .txt .ct{ margin-bottom: 8px; } #sub.hdl02 .con07 .box .txt .ct strong{ gap: 4px; font-size: 16px; } #sub.hdl02 .con07 .box .txt .ct strong svg{ width: 20px; height: auto; } #sub.hdl02 .con07 .box .txt .ct{ padding: 10px 12px; } #sub.hdl02 .con07 .box .p_box{ padding: 12px; margin-top: 6px; } #sub.hdl02 .con07 .box .p_box p{ font-size: 14px; margin-bottom: 5px; } #sub.hdl02 .con07 .box .p_box ul li{ font-size: 12px; line-height: 1.5em; } #sub.hdl .st_box{ padding: 20px 10px; } #sub .st02{ display: block; } #sub.hdl02 .con06 .st_box p{ font-size: 12px; } #sub.hdl03 .con01{ padding-bottom: 0; padding-top: 20px; } #sub.hdl03 .con01 .circle_box{ font-size: 18px; } #sub.hdl03 .step_t strong{ font-size: 14px; } #sub.hdl03 .step_t p{ font-size: 12px; } #sub.hdl03 .con02 .wrap .txt .wrap{ gap: 8px; padding: 12px 0; } #sub.hdl03 .con02 .wrap{ flex-flow: column; gap: 20px; } #sub.hdl03 .con02 .wrap > div{ width: 100% !important; } #sub.hdl03 .box .h_table2 .tb > div{ height: 40px; } #sub.hdl03 .box .h_table2 .tb .h_th{ font-size: 12px; } #sub.hdl03 .box .h_table2 .tb > div > p { font-size: 12px; } #sub.hdl03 .con03 .box:first-child{ padding-bottom: 20px; } #sub.hdl03 .con03 .box:last-child{ padding-top: 20px; } #sub.hdl03 .box .h_table3 .box2 .th{ height: 40px; } #sub.hdl03 .box .h_table3 .box2 .th strong{ font-size: 12px; } #sub.hdl03 .con03 .box > strong{ margin-bottom: 8px; } #sub.hdl03 .con03 .box > strong{ margin-bottom: 8px; } #sub.hdl03 .con07 ul li .info{ padding: 12px; } #sub.hdl03 .con07 ul li{ width: 100%; } #sub.board .g_list ul{ gap: 20px; } #sub.board .g_list ul li .txt strong{ font-size: 13px; } #sub.board .b_top{ flex-flow: column; gap: 4px; } #sub.board .b_top .search{ width: 100%; } #sub.board .b_top .sort{ width: 100%; } #sub.board.view .v_tit{ flex-flow: column; gap: 10px; } #sub.board.view .v_tit{ padding: 20px; margin-bottom: 4px; } #sub.board.view .v_tit .left strong{ font-size: 16px; } #sub.board.view .v_tit .left{ gap: 4px; } #sub.board.view .v_tit .left .bt{ gap: 4px; } #sub.board.view .v_tit .left .bt p{ font-size: 12px; } #sub.board.view .recommend{ margin-top: 12px; } #sub.board.view .v_con{ padding: 20px; min-height: 240px; } #sub.board.view .recommend a{ gap: 4px; padding: 4px 10px; padding-right: 14px; } #sub.board.view .recommend a svg{ width: 22px; height: auto; } #sub.board.view .recommend a strong{ font-size: 14px; } #sub.board.view .reple > strong{ font-size: 16px; margin-bottom: 12px; } #sub.board.view .reple > strong > span{ font-size: 12px; width: 20px; height: 20px; } #sub.board.view .reple .list .box .r_top > strong{ font-size: 14px; gap: 4px; } #sub.board.view .reple .list .box .r_top .right{ gap: 4px; } #sub.board.view .reple .list .box .r_con { padding: 10px; border-radius: 8px; min-height: 60px; } #sub.board.view .reple .list .box .r_con p{ font-size: 12px; } #sub.board.view .reple .r_form{ margin-top: 20px; } #sub.board.view .reple .r_form textarea{ font-size: 12px; height: 80px; padding: 10px; } #sub.board.view .reple .r_form button{ width: 60px; height: 32px; font-size: 12px; } #sub.board.vod .g_list ul li .img:after{ width: 50px; height: 50px; background-size: 100% 100% !important; } #sub.board .b_top .sort{ padding: 4px; } #sub.board .r_list > ul > li{ width: calc(50% - 10px); } #sub.board .r_list > ul > li a{ width: 100%; } #sub.board .r_list > ul > li a .info{ width: 100%; } #sub.board.re_view .con01 .profile{ width: 100px; height: 100px; } #sub.board.re_view .con01 .profile img{ width: 100%; } #sub.board.re_view .con01 .profile{ margin-bottom: 10px; } #sub.board.re_view .con01 .txt strong{ font-size: 16px; } #sub.board.re_view .con01 .txt{ gap: 4px; } #sub.board.re_view .con01 .txt em{ font-size: 13px; } #sub.board.re_view .con01{ padding: 30px 0; } #sub.board.re_view .con02 .st01{ margin-bottom: 20px; } #sub.board.re_view .con02 .con_box{ padding: 12px; } #sub.board.re_view .career{ flex-flow: column; gap: 20px; } #sub.board.re_view .career > dl{ width: 100%; } #sub.board.re_view .thesis2 .dl02 .list .img{ width: 100px; } #sub.board.rev03 .con02 table th{ text-align: center; padding-left: 0; font-size: 11px; } #sub.center .con02 .inner{ flex-flow: column; gap: 20px; } #sub.center .con02 .inner > div{ width: 100% !important; } #sub.center .con02 .inner > .txt{ gap: 12px; } #sub.center .con04 .box ul li .img{ width: auto; } #sub.center .con04 .box ul li .img img{ width: 100px; } #sub.center .con04 .box ul li .txt{ width: calc(100% - 110px); } #sub.center .con04 .box ul li .txt p{ font-size: 12px; } #sub.center .con04 .box > button strong{ font-size: 14px; } #sub.center .con04 .box > button{ height: 40px; } #sub.center .con04 .box > button svg{ width: 20px; } #sub.center .con03 ul li .txt p{ font-size: 12px; } #sub.center .con03 ul li .txt{ margin-top: 10px; } #sub .st03{ font-size: 15px; } #sub.center .con01 .inner p{ font-size: 12px; line-height: 1.5em; } #sub.center .con02 .inner > .txt ul li{ font-size: 12px; line-height: 1.5em; padding-left: 8px; } #sub.center .con02 .inner > .txt ul li:after{ top: 7px; } #sub.center .con02 .inner > .txt ul{ gap: 4px; } #sub.center .con02 .inner > .txt{ gap: 8px; } #sub.center .c_box{ padding: 12px; } #sub.center .c_box strong{ font-size: 14px; margin-bottom: 4px; } #sub.board .w_list ul li a{ gap: 20px; } #sub.board .w_list .img { width: 140px; } #sub.board .w_list .img img{ } #sub.board .w_list ul li a .txt{ gap: 5px; width: calc(100% - 160px); } #sub.board .w_list ul li a .txt strong{ font-size: 14px; } #sub.board .w_list ul li a .txt p{ font-size: 12px; } #sub.board .w_list ul li a .txt .tag span{ padding: 0 6px; height: 24px; font-size: 12px; } #sub.board .w_list ul li a .txt .tag{ gap: 4px; } #sub.board .w_list ul li a .txt .bt{ gap: 4px; } #sub.board .w_list ul li a .txt .bt p{ font-size: 12px; } #sub.board .w_list ul li a{ padding: 15px; } #sub.board.view .v_tit .left .tab{ gap: 4px; } #sub.board.view .v_tit .left .tab span{ padding: 0 6px; height: 24px; font-size: 12px; } #sub.sympo .info_p2{ margin-top: 0; } #sub.sympo .con01 .img{ margin-top: 10px; } #sub.board .b_list table{ border-spacing: 0 4px; } #sub.board .b_list table th{ font-size: 10px; } #sub.board.schedule .b_list table td:nth-child(1){ padding-left: 0; } .sub_pop .box .txt{ padding: 15px; } .sub_pop2 .box form dl dt{ font-size: 14px; } .sub_pop2 .box form dl dd input[type="text"]{ font-size: 13px; height: 38px; padding-left: 15px; } .sub_pop2 .box form{ gap: 10px; } .sub_pop2 .box form dl dd ul li{ font-size: 13px; } .sub_pop2 .box .img img{ border-radius: 10px 10px 0 0; } .sub_pop2 .box .pop_btn a{ border-radius: 0 0 10px 10px; } .sub_pop2 .box form dl dd textarea{ height: 100px; font-size: 13px; } .sub_pop2 .box .pop_btn a{ font-size: 14px; } #sub.direction .con02 .txt .box ul li{ font-size: 12px; } #sub.direction .con02 .txt .box p{ font-size: 12px; } #sub.calculator .con01 .inner{ flex-flow: column; } #sub.calculator .con01 .inner:after{ display: none; } #sub.calculator .con01 .inner > form{ width: 100%; } #sub.calculator .con01 form .top dl{ padding: 6px; gap: 8px; padding-right: 15px; } #sub.calculator .con01 form .top dt{ width: 24px; height: 24px; font-size: 14px; } #sub.calculator .con01 form .top dl dd{ font-size: 14px; } #sub.calculator .con01 form .top{ gap: 6px; } #sub .chk_box > div{ height: 38px; font-size: 12px; } #sub.calculator .con02 ul{ gap: 20px; margin-top: 20px; } #sub.calculator .con02 ul li .box strong{ font-size: 14px; } #sub.calculator .con02 ul li .box .go_btn{ margin-top: 10px; } #sub.calculator .con02 ul li svg{ width: 50px; height :auto; } #sub.calculator .con02 ul li .box{ margin-top: -25px; padding-top: 40px; padding-bottom: 20px; } #sub.calculator .con02 .inner > svg{ width: 38px; height: auto; margin-bottom: 8px; } .cal_pop .box{ width: 100%; } .cal_pop .box{ padding: 40px 20px; gap: 12px; } .cal_pop .box .wrap2 > strong{ font-size: 16px; padding-bottom: 10px; margin-bottom: 10px; } .cal_pop .box .wrap2 .graph > strong{ font-size: 14px; line-height: 1.5em; } .cal_pop .box .wrap2 .p_box{ padding: 6px 10px; } .cal_pop .box .wrap2 .p_box p{ font-size: 12px; line-height: 1.5em; } .info_p3{ font-size: 12px; } .cal_pop .percent p{font-size: 14px; margin-bottom: 4px; } .cal_pop .percent strong{ font-size: 24px; } .cal_pop .state{ margin-top: 10px; margin-bottom: 10px; height: 36px; border-radius: 8px; } .cal_pop .state strong{ font-size: 14px; } .cal_pop .p04{ font-size: 12px; } #sub.calculator .con02 .inner > strong{ font-size: 14px; line-height: 1.5em; } #sub.ox .con01 .btn button svg{ width: 50px; } #sub.ox .con01 .btn { gap: 8px; } #sub.ox .con01 .inner > strong{ font-size: 15px; } .ox_pop .box{ width: 100%; } .ox_pop .st svg{ width: 38px; height: auto; } .ox_pop .st strong{ font-size: 18px; } .ox_pop .box{ padding: 30px 20px; } .ox_pop .st .p_box{ margin-top: 10px; padding: 10px; min-height: 120px; } .ox_pop .st .p_box p{ font-size: 12px; } .ox_pop02 .box{ height: 200px; } #sub.board .b_top .b_cate ul li a{ font-size: 12px; padding: 0 12px; height: 28px; } #sub.faq .f_list ul li{ padding: 0 20px; } #sub.faq .f_list ul li .title span{ width: 80px; font-size: 12px; } #sub.faq .f_list ul li .title strong{ font-size: 14px; width: calc(100% - 80px); } #sub.faq .f_list ul li .title svg{ width: 24px; height: auto; } #sub.faq .f_list ul li .title{ height: 50px; } #sub.faq .f_list ul li .answer{ padding-top: 12px; padding-bottom: 12px; } #sub.faq .f_list ul li .answer p{ font-size: 12px; } #sub.contact form{ flex-flow: column; gap: 20px; } #sub.contact form .f_box{ width: 100%; } #sub.contact form .f_box p{ font-size: 14px; } #sub.board .text_box{ font-size: 14px; padding: 20px; border-radius: 12px; } #sub.contact form{ gap: 12px; } #sub.mypage .con01 .inner > strong{ margin-bottom: 20px; } #sub.mypage .con01 .dash{ flex-flow: column; } #sub.mypage .con01 .dash > div{ width: 100% !important; border-right: none !important; border-bottom: 1px solid #D9E3E8; padding-bottom: 10px; padding-top: 10px; } #sub.mypage .con01 .g_con{ height: auto; margin-top: 4px; } #sub.mypage .con01 .dash > div{ padding:10px; } #sub.mypage .con01 .dash > div:last-child{ border-bottom: none; } #sub.mypage .con01 .code{ flex-flow: column; height: auto; padding: 20px; gap: 8px; } #sub.mypage .con01 .code > dl{ width: 100%; } #sub.mypage .con02 ul li a{ height: 60px; padding: 0 20px; gap: 8px; } #sub.mypage .con02 ul li a .arrow{ right: 20px; } #sub .nb_box{ padding: 20px; } #sub .sub_con .con01{ padding-bottom: 60px; } #sub .number_t > div{ gap: 6px; padding: 6px; padding-right: 14px; } #sub .number_t strong{ font-size: 14px; } #sub .number_t span{ width: 22px; height: 22px; font-size: 12px; } #sub .nb_box .n_title > p{ margin-top: 10px; } #sub.intro .con02 .benefits th{ height: 32px; font-size: 12px; } #sub.intro .con02 .benefits td{ height: 90px; font-size: 12px; } #sub.mypage.score .con01 .point .g_con{ flex-flow: column; gap: 4px; align-items: flex-start; } #sub.mypage.score .con01 .dash .point .points{ font-size: 12px; } #sub.mypage.score .con01 .dash .point .g_con p{ font-size: 12px; } #sub.mypage.score .con01 .dash .grade .g_con .txt > strong{ font-size: 16px; } #sub.mypage.score .con01 .dash .grade .g_con .txt > p{ font-size: 12px; } #sub.mypage.score .con03 .st03{ flex-flow: column; align-items: flex-start; } #sub.mypage.score .con03 .st03{ font-size: 16px; } #sub.mypage.score .con03 .st03 a{ font-size: 12px; } #sub.mypage.score .con03 .cate{ padding: 0 20px; height: 50px; } #sub.mypage.score .con03 .cate p{ font-size: 14px; } #sub.mypage.score .con03 .cate ul li a{ width: 50px; height: 28px; font-size: 12px; } #sub.mypage.score .con03 .cate ul{ gap: 4px; } #sub.mypage.score .con03 .inner > ul > li{ padding: 20px; height: 50px; } #sub.mypage.score .con03 .inner > ul > li .p_wrap p{ font-size: 12px; } #sub.mypage.score .con03 .inner > ul > li .p_wrap{ gap: 20px; } #sub.mypage.score .con03 .inner > ul > li strong{ font-size: 14px; } #sub.mypage.score .sub_con .con01{ padding-bottom: 0; } .sub_pop.info_s .box{ width:100%; height: auto; } .sub_pop .box .p_tit{ padding-bottom: 10px; margin-bottom: 10px; } .sub_pop .box .p_tit strong{ font-size: 16px; } .sub_pop .box ul li{ font-size: 12px; line-height: 1.5em; } .sub_pop .box ul{ gap: 4px; } #sub.mypage .edit_b{ width: 100%; } #sub.mypage .edit_b ul li { flex-flow: column; gap: 4px; } #sub.mypage .edit_b ul li strong{width: 100%; } #sub.mypage .edit_b ul li .inp_w{ width: 100%; height: 40px; } #sub.mypage .edit_b ul li strong{ font-size: 14px; } #sub.mypage .edit_b ul li p{ font-size: 14px; padding-left: 15px; } #sub.mypage .edit_b ul li .bt button{ font-size: 12px; } #sub.mypage .btn_w{ width: 100%; } #sub.mypage .btn_w{ margin-top: 20px; } #sub.mypage .go_btn .del{ font-size: 12px; } #sub.mypage .edit_b{ padding: 20px; } #sub.mypage.del .del_box > p{ font-size: 12px; } #sub.mypage.del .del_box .box{ padding: 20px; } #sub.mypage.del .del_box .box ul li{ padding-left: 8px; font-size: 12px; line-height: 1.5em; } #sub.mypage.del .del_box .box ul li:after{ top: 7px; } #sub.mypage.del .del_box .box ul{ gap: 8px; } #sub .per .chk_box label{ font-size: 12px; } #sub.mypage.del .go_btn{ gap: 8px; } #sub.mypage .edit_b ul li.cap .inp_w .in_box{ height: 40px; } #sub.mypage .edit_b ul li .capt{ font-size: 12px; padding: 0; } #sub.mypage .edit_b ul li .error{ font-size: 12px; padding-left: 0; } #sub.friend .con01 .point_if svg{ margin-bottom: 10px; width:60px; height: auto; } #sub.friend .con01 .point_if strong{ font-size: 16px; margin-bottom: 4px; } #sub.friend .con01 .point_if p{ font-size: 12px; } #sub.friend .con01 .point_if{ padding: 30px 0; margin-bottom: 30px; } #sub.friend .con01 .bt .give .box{ margin-top: 10px; } #sub.friend .con01 .bt > div{ width: 100%; } #sub.friend .con01 .bt:after{ display: none; } #sub.friend .con01 .bt{ flex-flow: column; gap: 20px; } #sub.friend .con01 .bt .give .box svg{ margin-bottom: 4px; } #sub.friend .con01 .bt .give .box svg{ width: 50px; height: auto; } #sub.friend .con01 .bt .give .box strong{ font-size: 18px; margin-bottom: 4px; } #sub.friend .con01 .bt .give .box p{ font-size: 12px; } #sub.friend .con01 .bt .give .box{ height: auto; padding: 30px 0; } #sub.friend .con01 .bt .reference .code{ height: 40px; font-size: 14px; padding: 0 12px; margin-top: 8px; } #sub.friend .con01 .bt .reference .share_b{ gap: 10px; margin-top: 10px; } #sub.friend .con01 .bt .reference .share_b a{ width: 50%; height: 40px; padding: 5px; gap: 6px; } #sub.friend .con01 .bt .reference .share_b a svg{ width: 24px; height: auto; } #sub.friend .con01 .bt .reference .share_b a p{ font-size: 13px; } #sub.friend .con02 ul{ gap: 6px; } #sub.friend .con02 svg{ height: 42px; width: auto; } #sub.friend .con02 ul{ margin-top: 8px; } #sub.friend .con02 ul li{ font-size: 12px; padding-left: 8px; line-height: 1.5em; } #sub.point .con01 .color_bg .flag_n ul{ gap: 20px; } #sub.point .con01 .p_list ul{ flex-flow: wrap; } #sub.point .con01 .p_list ul li{ width: calc(50% - 10px); } .product_info .box{ width: 100%; padding: 30px 20px; } .product_info .box dl dt{ font-size: 12px; line-height: 1.5em; } .product_info .box dl dd{ font-size: 12px; line-height: 1.5em; } .product_info .box dl dd ul li{ font-size: 12px; line-height: 1.5em; } .product_info .box .go_btn a{ width: 100%; } .p_state .box{ width: 100%; padding: 30px 20px; } .p_state .box .s_t strong{ font-size: 15px; } .p_state .box .s_t{ gap: 10px; } .p_state .box .s_t svg{ width: 50px; height: auto; } .p_state .box .s_t p{ font-size: 13px; } .p_state .box .go_btn{ margin-top: 10px; gap: 6px; } .p_state .box .go_btn a{ width: calc(50% - 3px); } .p_state .box .s_t{ padding-bottom: 10px; } #sub.coupon .con03 .inner > p{ font-size: 12px; } #sub.coupon .con03 .c_list table th{ height: 40px; font-size: 12px; } #sub.coupon .con03 .c_list table td .wrap .txt strong{ font-size: 14px; } #sub.coupon .con03 .c_list table td{ font-size: 12px; padding: 8px; } #sub.coupon .con03 .c_list table td .wrap .img2 img{ border-radius: 8px; width: 80px; } #sub.coupon .con03 .c_list table td .wrap{ gap: 12px; } #sub.coupon .con03 .c_list table td .wrap .txt{ gap: 4px; } #sub.coupon .con03 .c_list table td .wrap .txt p{ font-size: 12px; } #sub.museum .con03 .wrap .m_info dl dt span{ width: 30px; height: 30px; padding: 2px; } #sub.museum .con03 .wrap .m_info dl dt span b{ font-size: 13px; } #sub.museum .con03 .wrap .m_info dl dt{ font-size: 15px; line-height: 1.5em; } #sub.museum .con03 .wrap .m_info dl{ padding: 20px; } #sub.museum .con03 .wrap .m_info dl dt{ padding-bottom: 10px; } #sub.museum .con03 .wrap .m_info dl dd{ font-size: 12px; padding-top: 10px; } #sub.museum .con02 .c02 ul li dd span{ font-size: 12px; padding: 4px 12px; } #sub.museum .con02 .c02 ul li dl{ gap: 6px; } #sub.museum .con02 .c02 ul li dt{ font-size: 14px; } #sub.museum .con02 .c02 ul li{ gap: 10px; } #sub.museum .con02 .c02 ul li dd{ gap: 8px; } #sub.museum .con02 .c02 ul li dd p{ font-size: 12px; line-height: 1.5em; } #sub.museum .con02 { background-size: cover; } #sub.museum .con02 .c02{ padding-bottom: 50px; padding-top: 50px; } #sub.museum .con02 .c02 strong{ font-size: 18px; } #sub.museum .con02 .c01{ height: auto; padding: 50px 0; } #sub.museum .con01:before{ height: 20%; } #sub.museum .con01 .txt{ padding-top: 30px; } #sub.museum .con01 .txt p{ font-size: 12px; } #sub.museum .con02 .c01 ul{ flex-flow: column; } #sub.museum .con02 .c01 ul li{ width: 100%; } #sub.museum .con01 .t_box p{ font-size: 13px; } #sub.museum .con02 .c01 ul li .i{ width: 70px; } #sub.museum .con02 .c01 ul li .txt strong{ font-size: 15px; } #sub.museum .con02 .c01 ul li .txt em{ font-size: 12px; } #sub.museum .con02 .c02 ul li i{ width: 80px; height: 80px; } #sub.museum .con02 .c02 ul li i svg{ width: 50px; height: auto; } #sub.museum .con02 .c02{ margin-top: 0; } #sub.museum .con03 .wrap{ gap: 10px; } #sub.museum .con03 .wrap .m_info{ width: 100%; gap: 10px; } #sub.museum .con03 .wrap .m_info dl dt{ font-size: 13px; } #sub.museum .con03 .wrap .m_info dl dd{ font-size: 12px; line-height: 1.5em; } #sub.found .con02 ul li{ width: calc(50% - 10px); } #sub.intro .con02 svg{ width: 70px; height: auto; } #sub.found .con03 .hdl img:nth-child(1){ width: 180px; right: -35px; top: -50px; } #sub.found .con03 .hdl img:nth-child(2){ width: 50px; display: none; } #sub.found .con03 .hdl img:nth-child(3){ width: 70px; } #sub.found .con03 .inner{ padding-top: 100px; padding-bottom: 100px; } #sub.found .con03 strong{ font-size: 20px; line-height: 1.5em; } #sub.found .con01{ padding-top: 250px; } #sub.partner .con01 ul{ gap: 20px; flex-flow: column; } #sub.partner .con01 ul li{ width: 100%; } #sub.partner .con01 p{ padding-bottom: 20px; } #sub.board.poly03 .con01 .c_list ul{ gap: 30px 20px; } #sub.board.poly03 .con01 .c_list ul li{ width: calc(50% - 10px); } #sub.board.poly03 .con01 .c_list ul li a .hover svg{ width: 50px; height: auto; } #sub.board.poly03 .con01 .inner > strong{ margin-bottom: 20px; } #sub.poly01 .con01 .c01{ flex-flow: column; } #sub.poly01 .con01 .c01 > div{ width: 100% !important; } #sub.poly01 .con01 .c01{ padding-bottom: 20px; } #sub.poly01 .con01 .c02{ padding-top: 20px; } #sub.poly01 .con01 .c02 .txt{ padding-top: 10px; } #sub.poly .nb_box .n_title .number_t img{ height: 36px; } #sub.poly .nb_box .nb_con .caption{ font-size: 12px; right: 20px; bottom: 20px; } #sub.poly .nb_box .nb_con .c_box .nb_ul li{ font-size: 12px; padding-left: 8px; line-height: 1.5em; } #sub.poly .nb_box .nb_con .c_box .nb_ul li:after{ top: 7px; } #sub.poly .nb_box .nb_con .c_box{ padding: 12px; } #sub.poly .nb_box .st04{ font-size: 13px; line-height: 1.5em; margin-bottom: 10px; } #sub.poly .nb_box .nb_con .c_box{ width: 100%; } #sub.poly .con_w2 .nb_con{ margin-bottom: 8px; } #sub.poly .con_w2 .wrap > div > strong{ font-size: 14px; margin-bottom: 8px; } #sub.poly01 .con09{ padding-bottom: 60px !important; } #sub.poly01 .con_w:nth-child(3) ~ .con_w{ padding-top: 20px; } #sub.poly .con_w2 .wrap{ gap: 20px; flex-flow: column; } #sub.poly .con_w2 .wrap > div{ width: 100%; } #sub.poly .nb_box .nb_con .color_b{ padding: 12px; } #sub.poly02 .con02 .inner{ gap: 30px; } #sub.bwa01 .con02 .wrap{ gap: 20px; flex-flow: column; } #sub.bwa01 .con02 .wrap > div{ width: 100%; } #sub.bwa01 .con02 .wrap .txt dl dd ul li{ font-size: 12px; line-height: 1.5em; padding-left: 8px; } #sub.bwa01 .con02 .wrap .txt dl dd ul li:after{ top: 7px; } #sub.bwa01 .con02 .wrap .txt dl dd{ padding: 12px; } #sub.bwa01 .con02 .wrap .txt dl dt{ padding-left: 12px; margin-bottom: 10px; font-size: 14px; } #sub.bwa01 .con02 .wrap .txt dl dt span{ font-size: 12px; margin-left: 2px; } #sub.bwa01 .con02 .wrap .txt dl dd ul{ gap: 3px; } #sub.bwa01 .con_w .nb_box2 .st04 .num{ width: 24px; height: 24px; font-size: 12px; } #sub.poly .nb_box .nb_table table th{ height: 38px; font-size: 12px; } #sub.poly .nb_box .nb_table table td{ height: 38px; font-size: 12px; } #sub.poly .nb_box .nb_table table{ border-spacing: 6px 6px; } #sub.poly .nb_box .table_wrap > strong{ font-size: 14px; } #sub.bwa01 .con_w .nb_box2 .st04{ flex-flow: column; align-items: center; gap: 4px; } #sub.bwa01 .con_w .nb_box2 .st04 .num{ position: static; } #sub.bwa01 .con15{ padding-bottom: 60px !important; } #sub.bwa02 .con03 .nb_con dl dt{ font-size: 14px; } #sub.bwa02 .con03 .nb_con dl{ gap: 6px; } #sub.bwa02 .con03 .nb_con dl dd{ padding :12px; font-size: 12px; line-height: 1.5em; border-radius: 8px; } #sub.bwa02 .con03 .nb_con{ gap: 20px; } #sub.found .con02 ul li svg{ width: 70px; height: auto; } #sub.found .con02 .inner{ gap : 20px; } #sub.found .con01 .img{ margin-top: -50px; } .d_pop .wrap .box .d_tit { margin-bottom: 20px; } .d_pop .wrap .box .d_tit strong{ font-size: 18px; } .d_pop .wrap .box{ padding: 30px; padding-top: 40px; } .d_pop1 .wrap .box .img_box:after{display: none; } .d_pop1 .wrap .box .img_box{ padding: 0; gap: 20px; flex-flow: column; } .d_pop1 .wrap .box .img_box .img{ width: 100%; } .sub_pop .box .close_b{ right: 10px; top: 10px; } .d_pop2 .wrap .box .img_box{ gap: 20px;flex-flow: column; } .d_pop2 .wrap .box .img_box:after{ display: none; } .d_pop2 .wrap .box .img_box > div{ width: 100%; } .d_pop2 .wrap .box .img_box > div{ gap: 8px; } .d_pop2 .wrap .box .img_box .p_box strong{ font-size: 15px; } .d_pop2 .wrap .box .img_box .p_box p{ font-size: 12px; line-height: 1.5em; } .d_pop2 .wrap .box .img_box .p_box{ gap: 4px; } .d_pop2 .wrap .box .img_box .p_box{ padding: 12px; } .d_pop2 .wrap .box .img_box > div > p{ font-size: 12px; } .d_pop .d_ul{ flex-flow: column; gap: 20px; } .d_pop .d_ul:after{ display: none; } .d_pop .d_ul li{ width: 100%; } .d_pop .d_ul li .d_tit2{ margin-bottom: 10px; } .d_pop .d_ul li .d_tit2 strong{ font-size: 16px; line-height: 1.5em; } .d_pop .d_ul li .txt{ margin-top: 10px; gap: 4px; } .d_pop .d_ul li .txt strong{ font-size: 14px; } .d_pop .d_ul li .txt em{ font-size: 12px; } .d_pop .d_ul li .txt em br{ display: none; } .d_pop .info_p{ font-size: 12px !important; line-height: 1.5em !important; } .d_pop .info_p br{ display: none !important; } .d_pop4 .d_ul li .imgs{ margin-top: 10px; } .d_pop5 .d_ul li .txt{ margin-bottom: 8px; margin-top: 0; } .d_pop5 .box > div svg{ margin-bottom: 10px; } .d_pop5 .box > div svg{ width :160px; height: auto; } .d_pop .info_p{ margin-top: 10px; } #sub.disease .con01 .wrap .list{ width: 100%; } #sub.disease .con01 .wrap .list{ gap :20px; } #sub.disease .con01 .wrap .list > div .tit .left strong span{ font-size: 12px; } #sub.disease .tabs ul{ flex-flow: wrap; gap: 10px; } #sub.disease .tabs ul li{ width: calc(33.333333% - 6.6666666666px); } #sub.disease .tabs ul li a strong{ font-size: 13px; } #sub.disease .tabs ul li a{ gap: 8px; } #sub.disease .nb_box .img_graph img{ width: 100%; } #sub.disease .nb_box .img_graph{ flex-flow: column; gap: 20px; } #sub.disease .nb_box svg{ width :100%; height: auto; } #sub.disease .con03 .inner{ gap: 20px; } #sub.disease .nb_box{ padding: 20px; } #sub.disease02 .nb_box2 .nb_con dl{ flex-flow: column; } #sub.disease02 .nb_box2 .nb_con dl dt{ height: auto; padding: 8px 0; width: 100%; font-size: 14px; } #sub.disease02 .nb_box2 .nb_con dl dd{ width: 100%; } #sub.disease02 .nb_box2 .nb_con dl dd{ font-size: 12px; line-height: 1.5em; } #sub.disease02 .nb_box3 .img_graph .wrap ul{ flex-flow: wrap; gap: 20px; } #sub.disease02 .nb_box3 .img_graph .wrap ul li{ width: calc(50% - 10px); display: flex; justify-content: center; } #sub.disease03 .nb_box2 .nb_con .ca{ flex-flow: wrap; gap: 20px; } #sub.disease03 .nb_box2 .nb_con .ca li{ width: calc(50% - 10px); } #sub.disease03 .nb_box3 .img_graph .wrap{ gap: 20px; flex-flow: column; } #sub.disease03 .nb_box3 .img_graph .wrap svg{ width: 100%; height: auto; } #sub.disease04 .nb_box3 .nb_con2 ul{ gap: 20px; flex-flow: wrap; } #sub.disease04 .nb_box3 .nb_con2 ul li{width: calc(50% - 10px); } #sub.disease04 .nb_box4 .nb_con ul li img{ width: 100%; } #sub.disease04 .nb_box4 .nb_con ul li { width: calc(50% - 10px); } #sub.disease .nb_t{ font-size: 14px; } #sub.disease04 .nb_box5 .nb_con .p_box{ padding: 12px; } #sub.disease04 .nb_box5 .nb_con .p_box p{ font-size: 12px; line-height: 1.5em; } #sub.disease06 .nb_box4 .war .p_box{ padding: 12px; } #sub.disease06 .nb_box4 .war .p_box p{ font-size: 12px; line-height: 1.5em; } #sub.disease06 .nb_box2 .nb_con .wrap ul{ flex-flow: wrap; gap: 20px; } #sub.disease06 .nb_box2 .nb_con .wrap ul li{ width: calc(33.33333% - 13.33333333333333px); } #sub.disease06 .nb_box2 .nb_con .wrap ul li img{ width: 100%; } } */ /* @media (max-width: 540px) { #sub.board .r_list > ul{ gap: 20px; } #sub.board .r_list > ul > li{ width: 100%; } #sub.board.re_view .thesis2 .dl02 .list .txt strong{ font-size: 14px; } #sub.board.re_view .thesis2 .dl02 .list .txt p{ font-size: 12px; } #sub.center .con03 ul li { width: calc(50% - 10px); } #sub.board .w_list .img{ width: 90px; } #sub.board .w_list a .txt{ width: calc(100% - 110px); } #sub.board .w_list ul li{ width: 100%; } #sub.board .w_list ul li a{ width: 100%; } #sub.board .w_list ul li a .txt{ width: calc(100% - 110px); } #sub.board .b_list table th{ display: none; } #sub.board .b_list table tbody{ display: block; width: 100%; border-top: 1px solid #D9E3E8; } #sub.board .b_list table tbody tr{ display: flex; flex-flow: column; width: 100%; padding: 8px 0; border-bottom: 1px solid #D9E3E8; padding: 8px; gap: 4px; } #sub.board .b_list table tbody tr td{ display: block; width: 100%; border: none; height: auto; text-align: left; padding-left: 0 !important; } #sub.board .f_box{ flex-flow: column; gap: 4px; align-items: flex-start; } #sub.board .f_box > strong br{ display: none; } #sub.board .f_box.right:after{ top: 68%; } #sub.calculator .con02 ul{ display: flex; gap: 20px; flex-flow: column; } #sub.calculator .con02 ul li { width: 100%; } #sub.contact form .f_box .in_box{ width: 100%; } #sub.board .text_box{ width: 100%; height: 180px; } #sub .per .chk_box label{ font-size: 12px; } #sub.mypage .con02 ul{ gap: 8px; } #sub.mypage .con02 ul{ flex-flow: column; gap: 8px; } #sub.mypage .con02 ul li{ width: 100%; } #sub .sub_con .con01{ padding-bottom: 60px; } #sub.intro .con02 .nb_box .grade { flex-flow: wrap; } #sub.intro .con02 .nb_box .grade li{ width: calc(50% - 10px); } #sub.intro .con02 .inner{ gap: 20px; } #sub.friend .con01 .bt .give{ flex-flow: column; gap: 20px; } #sub.friend .con01 .bt .give > div{ width: 100% !important; } #sub.friend .con01 .point_if svg{ width: 40px; } #sub.friend .con01 .bt .give .box{ padding: 12px 0; } #sub.coupon .con03 .c_list table td .wrap .img2 img{ width: 40px; } #sub.coupon .con03 .c_list table td .wrap .txt strong{ font-size: 12px; } #sub.coupon .con03 .c_list table td{ font-size: 10px; } .d_pop .wrap .box .d_tit strong{ font-size: 15px; } .d_pop .wrap .box{ padding-left: 20px; padding-right: 20px; } } */ /**/