/* Common **********************************************************************/ /* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); <-- 기존에 있던 것 */ /* Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 900; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); } @font-face { font-family: 'Pretendard'; font-weight: 100; src: url('/font/Pretendard-Thin.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 200; src: url('/font/Pretendard-ExtraLight.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 300; src: url('/font/Pretendard-Light.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 400; src: url('/font/Pretendard-Regular.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 500; src: url('/font/Pretendard-Medium.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 600; src: url('/font/Pretendard-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 700; src: url('/font/Pretendard-Bold.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 800; src: url('/font/Pretendard-ExtraBold.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 900; src: url('/font/Pretendard-Black.woff2') format('woff2'); } /* Common **********************************************************************/ html,body {width:100%; } html {overflow-y:scroll; box-sizing:border-box;} *, *:before, *:after{box-sizing:inherit;} *{ -webkit-text-size-adjust:none; -webkit-text-size-adjust - auto | none | N% (default auto) } body {word-break:break-all;-ms-word-break:break-all; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;} fieldset,img {border:0px none; vertical-align:top;} dl,ul,ol,menu,li {list-style:none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;} button {border:0 none; background-color:transparent; cursor:pointer;} body { background:#fff;} body,th,td,input,select,textarea,button {font-size:16px; line-height:1.6; font-family: 'Pretendard';color:#666; word-break:keep-all;} input, select, textarea, button{vertical-align:middle; } a:link,a:active,a:visited{color:#7d7d7d; text-decoration:none; border:0px;} a:hover,a:focus{color:#333; text-decoration:none} table {border-collapse:collapse; border-spacing:0;} address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;} summary, caption, legend, hr {width:0; height:0; font-size: ; line-height: ; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;} caption {position:static;} /* label hidden 처리 */ .invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;} label.invisible{*position:Absolute;} /* common */ .clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;} .clfix {display:inline-block;} .clfix {display:block;} * html .clfix {height:1%;} /* Hides from IE-mac */ .clfix {zoom:1;} /*for IE 5.5-7*/ .list {border-top:2px solid #1c1815; border-bottom:1px solid #1c1815;} /*멤버스킨*/ .title{font-size:15px; font-weight:bold;} /*테이블*/ .tbl_type,.tbl_type th,.tbl_type td{border:0} .tbl_type{width:100%;border-bottom:1px solid #e2e2e5; } .tbl_type th{padding:10px 0 10px 0;border-top:2px solid #383d4a; font-weight:bold; border-bottom:1px solid #e2e2e5;} .tbl_type p{font-size:11px; color:#b6b7bc;} .tbl_type td{padding:7px 0 7px 0;border-top:1px solid #e5e5e5;color:#4c4c4c; border-bottom:none; border-top:none; line-height:18px;} .tbl_type2,.tbl_type2 th,.tbl_type2 td{border:0} .tbl_type2{width:100%;border-bottom:1px solid #e7e7e7; } .tbl_type2 th{padding:10px 0 10px 0; background:#f9f9f9; text-align:center;} .tbl_type2 p{font-size:11px; color:#b6b7bc;} .tbl_type2 td{padding:10px 0 10px 10px; border-bottom:none; border-top:none; line-height:18px;} /*로그인스킨*/ #login_wrap {width:100%; background:#f7f7f7; padding:50px;} .login_top {width:100%; height:50px; border-bottom:1px solid #eaeaea; margin-bottom:20px;} .login_top h2 {font-size:30px; color:#4b4f58; line-height:1; font-weight:600;} .login_top h2 span {font-size:15px; font-weight:400; } .login_mid {display: flex; justify-content: space-between; width:100%; overflow: hidden;} .login_mid .login_con { width:50%; height:100%; } .login_mid .login_con h2 {text-align:center; color:#222; font-size:40px; margin-bottom:20px;} .login_mid .login_con .login_id {width:100%; height:40px; background:#fff; border:1px solid #fff; margin-bottom:10px;} .login_mid .login_con .login_id #mb_id {height:100%; width:90%; border:none; background:none; font-size:14px; color:#666; line-height:40px; vertical-align: top;} .login_mid .login_con .login_pw {width:100%; height:40px; background:#fff; border:1px solid #fff; margin-bottom:20px;} .login_mid .login_con .login_pw #mb_pass {height:100%; width:90%; border:none; background:none; font-size:14px; color:#666; line-height:40px; vertical-align: top;} .login_mid .login_con span {display:inline-block;width:10%; height:100%; text-align:center; line-height:40px; } .login_mid .login_con span img {vertical-align:middle;} .login_mid .login_con input::placeholder {font-size:14px; color:#c3c3c3;} .login_mid .login_con input::-webkit-input-placeholder { /* Chrome/Opera/Safari */font-size:14px; color:#c3c3c3;} .login_mid .login_con input::-moz-placeholder { /* Firefox 19+ */font-size:14px; color:#c3c3c3;} .login_mid .login_con input:-ms-input-placeholder { /* IE 10+ */font-size:14px; color:#c3c3c3;} .login_mid .login_con input:-moz-placeholder { /* Firefox 18- */font-size:14px; color:#c3c3c3;} .login_mid .login_btn {width:100%; height:55px; margin-top:20px;} .login_mid .login_btn button {width:100%; height:100%; background:#4b4f58; border:1px solid #4b4f58; text-align:center; color:#fff; font-size:18px; line-height:53px;} .login_mid .login_bottom {text-align:center;} .login_mid .login_bottom li {display:inline-block; margin-left:20px; padding-left:20px; position:relative; line-height:35px;} .login_mid .login_bottom li::before {width:1px; height:13px; background:#ddd; content:''; position:absolute; left:0; top:11px;} .login_mid .login_bottom li:first-child {margin-left:0; padding-left:0;} .login_mid .login_bottom li:first-child::before {display:none;} .login_mid .login_bottom li a {color:#666; font-size:15px; line-height:15px;} .login_mid .login_bottom li a img {vertical-align:middle; margin-right:5px;} .login_mid .login_bottom li label {color:#666; font-size:15px; line-height:15px;} .login_mid .login_bottom li input[type="checkbox"] {vertical-align:-3px;} .login_mid .login_bottom li .naver_login {display:inline-block; background: #00ce38; width: 200px; height: 35px; font-size: 14px; color: #fff; text-align: center; line-height: 35px; border-left: 1px solid #DDD; border-radius: 5px; vertical-align: middle;} .login_mid .login_bottom li .naver_login img {vertical-align:-1px;} .login_mid .login_img {width:47.27%;} .login_mid .login_img .img_wrap{position:relative; padding-bottom: 42.3%;} .login_mid .login_img .img_wrap img{position:Absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height:100%;} /*회원가입 스킨*/ .inWrap {width:98%; border:1px solid #353638; border-width:1px 0; padding:30px 0;} .inWrap.type1 { padding:50px 0;} .inWrap.type2 { padding:0;} .inWrap.type3 { padding:5px 0; border-bottom-width:0;} .inWrap.width1 { width:680px !important; margin:0 auto;} .tbox1 { border:1px solid #cdcdcd; } .tbox1 .boxTit { padding:20px 20px 10px; color:#333; font-weight:700; font-size:16px;} .tbox1 .txt_scroll { height:200px; padding:0 20px; overflow-y:auto;} .txt_type { line-height:25px; font-size:13px; color:#666;} .agreement input{vertical-align:middle; border:none;} .btnType { display:inline-block; position:relative; transition:all 0.3s;} .btnType.btn1 { height:30px; line-height:28px; padding:0 45px; font-size:13px;} .btnType.btn1.color2 {border:1px solid #333; background:#333; cursor:pointer; } .btnWrap input{color:#fff;} .center{text-align:center;} /* ==main== */ #wrap{ position: relative; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden;} .inner{width: 1460px; margin: 0 auto; max-width:100%;} #header{position: absolute;left: 0;top: 0;width: 100%;z-index: 2000;} #header .inner{display: flex;width: 1720px;height: 100px;align-items:center;justify-content: space-between;} #header .right{display: flex;gap:50px;align-items:center;} #header .right .login_box{display: flex;gap:45px;width: 202px;height: 44px;border-radius:44px;border: 1px solid rgba(255,255,255,.5);align-items:center;justify-content: center;} #header .right .login_box li:nth-child(1){position: relative;} #header .right .login_box li:nth-child(1):after{content:'';position: absolute;right: -25px;top: 50%;transform:translateY(-50%);width: 1px;height: 12px;background: #fff;opacity: .5;} #header .right .login_box li a{font-size: 14px;color: #fff;} /* gnb */ #header .gnb{display: flex;align-items: center;gap:53px;} #header .gnb li{position: relative;} #header .gnb li span a{position: relative;transition:.3s;display: block;height: 100%;line-height: 100px;font-size: 17px; color: #fff; font-weight: 500;transition:.2s;} #header .gnb li span a:after{content:'';position: absolute;bottom:34px;left: 50%;width: 60px;height: 2px;background: #fff;z-index: 1000;transform:translateX(-50%);opacity: 0;transition:.3s;} #header .gnb li:hover span a:after{opacity: 1;} #header .gnb .lnb_sub{display: none;position: absolute;z-index: 100;left: 50%; transform: translateX(-50%); top: calc(100% - 14px);} #header .gnb .lnb_sub .sub_menu{position: relative;width: 160px;} #header .gnb .lnb_sub li:not(:last-child){margin-bottom: 2px;} #header .gnb .lnb_sub li a{display: block;font-size: 16px;height: 45px;background: #000;line-height: 45px;color: #fff;transition:.3s;text-align: center;} #visual_wrap{position: relative;line-height: 1;} #visual_wrap .txt{position: absolute;top: 50%;width: 100%;left: 0;transform:translateY(-50%);text-align: center;color: #fff;font-family: 'Maven Pro';z-index: 200;} #visual_wrap .txt p{font-size: 20px;font-weight: 500;line-height: 46px;margin-bottom: 50px;} #visual_wrap .txt strong{display: block;font-size: 80px;margin-bottom: 80px;} #visual_wrap .txt a{display: block;margin: 0 auto;width: 500px;height: 50px;font-size: 20px;font-weight: 500;transition:.3s;border-radius: 50px;background: #fff;text-align: center;line-height: 48px;} #visual_wrap .txt a span:nth-child(1){color: #4f61ff;} #visual_wrap .txt a span:nth-child(2){color: #ff4769;} #visual_wrap .txt a span:nth-child(3){color: #7b4bbf;} #visual_wrap .txt a span:nth-child(4){color: #ff683b;} #visual_wrap .txt a:hover{background: #4f61ff;} #visual_wrap .txt a:hover span{color: #fff;} #visual_wrap .visual_item{position: absolute;display: flex;gap:40px;align-items:center;left: 100px;bottom: 63px;z-index: 200;} #visual_wrap .visual_item .swiper-pagination01{display: flex;gap:25px;} #visual_wrap .visual_item .swiper-pagination01 span{display: block;text-indent: -9999px;width: 8px;height: 8px;border-radius: 50%;border: 1px solid #fff;opacity: .5; background: none;} #visual_wrap .visual_item .swiper-pagination01 span.swiper-pagination-bullet-active{background: #fff;opacity: 1;} #visual_wrap .visual_item .visual_num{display: flex;gap:9px;align-items:center;font-size: 14px;color: #fff;} #visual_wrap .visual_item .visual_num span:nth-child(3){opacity: .5;} #visual_wrap .scroll{position: absolute;right: 100px;bottom: 60px;z-index: 200;animation:ani01 ease 1s infinite alternate;} @keyframes ani01{ 0%{bottom: 60px;} 100%{bottom: 20px;} } #section02{position: relative;line-height: 1;} #section02:after{content:'';position: absolute;left: 0;bottom: 0;width: 1260px;height: 324px;background:url(/images/main/main_bg01.png)center no-repeat;background-size:cover ; } #section02 .con .inner{position: relative;z-index: 200;padding: 147px 30px 30px;border-radius:10px;border: 1px solid #e3e6ea;background: rgba(255,255,255,.6);} #section02 .con .search_box{position: absolute;left: 210px;top: 30px;width: 724px;} #section02 .con form{display: flex;gap:10px;margin-bottom: 10px;} /* #section02 .con form input{width: 660px;height: 55px;border-radius: 10px;border: 3px solid #adb5c4;padding: 0 20px;font-size: 20px;color: #222;} #section02 .con form input::placeholder{font-size: 20px;color:#aaa;} */ #section02 .con form {display:block;} #section02 .con form .input_box {display:flex; gap: 10px; align-items:center;margin-bottom: 15px;} #section02 .con form .input_box input{width: 660px;height: 55px;border-radius: 10px;border: 3px solid #adb5c4;padding: 0 20px;font-size: 20px;color: #222;} #section02 .con form .input_box input::placeholder{font-size: 20px;color:#aaa;} #section02 .con form .cate_wrap{margin-bottom: 30px; display: flex; justify-content: center; gap:20px; align-items: center;} #section02 .con form .cate_wrap button{display: flex;gap:7px;width: 93px;height: 36px;border-radius:36px;background: #adb5c4;align-items:center;justify-content: center; color: #fff;} #section02 .con .search_box ul{display: flex;gap:4px;padding: 20px;flex-wrap:wrap;border: 1px solid #dce0e4;background: #fff;border-radius: 10px;} #section02 .con .search_box ul li{position: relative;cursor:pointer;width: calc((100% - 12px)/4);transition:.2s;border-radius: 10px;height: 55px;background: #eff1f2;font-size: 18px;color: #999;font-weight: 500;text-align: center;line-height: 55px;} #section02 .con .search_box ul li:hover{color: #fff;} #section02 .con .search_box ul li.s_btn01:hover{background: #ff62ac;} #section02 .con .search_box ul li.s_btn02:hover{background: #ffc34f;} #section02 .con .search_box ul li.s_btn03:hover{background: #7b4bbf;} #section02 .con .search_box ul li.s_btn04:hover{background: #ff4567;} #section02 .con .search_box ul li.s_btn05:hover{background: #5d6480;} #section02 .con .search_box ul li.s_btn06:hover{background: #ff683b;} #section02 .con .search_box ul li.s_btn07:hover{background: #4f61ff;} #section02 .con .search_box ul li.s_btn08:hover{background: #cde95b;} #section02 .con .search_box ul li.s_btn09:hover{background: #aaa1d8;} #section02 .con .search_box ul li.s_btn10:hover{background: #16bebb;} #section02 .con .search_box ul li.s_btn11:hover{background: #99ceff;} #section02 .con .search_box ul li.s_btn12:hover{background: #84d99e;} #section02 .con .search_box ul li:after{content:'';position: absolute;top: 5px;right: 5px;width: 8px;height: 8px;border-radius: 50%;} #section02 .con .search_box ul li.s_btn01:after{background: #ff62ac;} #section02 .con .search_box ul li.s_btn02:after{background: #ffc34f;} #section02 .con .search_box ul li.s_btn03:after{background: #7b4bbf;} #section02 .con .search_box ul li.s_btn04:after{background: #ff4567;} #section02 .con .search_box ul li.s_btn05:after{background: #5d6480;} #section02 .con .search_box ul li.s_btn06:after{background: #ff683b;} #section02 .con .search_box ul li.s_btn07:after{background: #4f61ff;} #section02 .con .search_box ul li.s_btn08:after{background: #cde95b;} #section02 .con .search_box ul li.s_btn09:after{background: #aaa1d8;} #section02 .con .search_box ul li.s_btn10:after{background: #16bebb;} #section02 .con .search_box ul li.s_btn11:after{background: #99ceff;} #section02 .con .search_box ul li.s_btn12:after{background: #84d99e;} #section02 .con .periodic_box ul li{display: flex;justify-content: space-between;align-items:center;margin-bottom: 4px;cursor:pointer;} #section02 .con .periodic_box ul li:last-child{margin-bottom: 0;} #section02 .con .periodic_box ul li div{width: 74px;} #section02 .con .periodic_box ul li div .box{position: relative;height: 74px;transition:.2s;border-radius: 7px;background: #fff;overflow:hidden;box-shadow: 1px 1px 10px 0px rgba(0,0,0,.1);} #section02 .con .periodic_box ul li div .box span{position: absolute;top: 4px;left: 2px;color: #fff;font-size: 12px;font-weight: 500;z-index: 1;} #section02 .con .periodic_box ul li div .box span:after{content:'';transition:.2s;position: absolute;left: -45px;top: -45px;width: 71px;height: 71px;z-index: -1;transform:rotate(45deg);} #section02 .con .periodic_box ul li div .box span.blue01:after{background: #4f61ff;} #section02 .con .periodic_box ul li div .box span.yellow01:after{background: #ffc34f;} #section02 .con .periodic_box ul li div .box span.pupple01:after{background: #7b4bbf;} #section02 .con .periodic_box ul li div .box span.pink01:after{background: #ff62ac;} #section02 .con .periodic_box ul li div .box span.red01:after{background: #ff4567 ;} #section02 .con .periodic_box ul li div .box span.black01:after{background: #5d6480;} #section02 .con .periodic_box ul li div .box.gray01{background: #d1d2d3;} #section02 .con .periodic_box ul li div .box.gray01 p{color: #a1a2a3;} #section02 .con .periodic_box ul li div .box.gray01 span:after{background: #a1a2a3;} #section02 .con .periodic_box ul li div .box.p_btn01_b{background: #ff62ac;} #section02 .con .periodic_box ul li div .box.p_btn01_b span:after{background: #ff62ac;} #section02 .con .periodic_box ul li div .box.p_btn01_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn02_b{background: #ffc34f;} #section02 .con .periodic_box ul li div .box.p_btn02_b span:after{background: #ffc34f;} #section02 .con .periodic_box ul li div .box.p_btn02_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn03_b{background: #7b4bbf;} #section02 .con .periodic_box ul li div .box.p_btn03_b span:after{background: #7b4bbf;} #section02 .con .periodic_box ul li div .box.p_btn03_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn04_b{background: #ff4567;} #section02 .con .periodic_box ul li div .box.p_btn04_b span:after{background: #ff4567;} #section02 .con .periodic_box ul li div .box.p_btn04_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn05_b{background: #5d6480;} #section02 .con .periodic_box ul li div .box.p_btn05_b span:after{background: #5d6480;} #section02 .con .periodic_box ul li div .box.p_btn05_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn06_b{background: #ff683b;} #section02 .con .periodic_box ul li div .box.p_btn06_b span:after{background: #ff683b;} #section02 .con .periodic_box ul li div .box.p_btn06_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn07_b{background: #4f61ff;} #section02 .con .periodic_box ul li div .box.p_btn07_b span:after{background: #4f61ff;} #section02 .con .periodic_box ul li div .box.p_btn07_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn08_b{background: #cde95b;} #section02 .con .periodic_box ul li div .box.p_btn08_b span:after{background: #cde95b;} #section02 .con .periodic_box ul li div .box.p_btn08_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn09_b{background: #aaa1d8;} #section02 .con .periodic_box ul li div .box.p_btn09_b span:after{background: #aaa1d8;} #section02 .con .periodic_box ul li div .box.p_btn09_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn10_b{background: #16bebb;} #section02 .con .periodic_box ul li div .box.p_btn10_b span:after{background: #16bebb;} #section02 .con .periodic_box ul li div .box.p_btn10_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn11_b{background: #99ceff;} #section02 .con .periodic_box ul li div .box.p_btn11_b span:after{background: #99ceff;} #section02 .con .periodic_box ul li div .box.p_btn11_b p{color: #fff;} #section02 .con .periodic_box ul li div .box.p_btn12_b{background: #7fd89a;} #section02 .con .periodic_box ul li div .box.p_btn12_b span:after{background: #7fd89a;} #section02 .con .periodic_box ul li div .box.p_btn12_b p{color: #fff;} #section02 .con .periodic_box ul li div .box p{position: relative;z-index: 200;line-height: 74px;text-align: center;font-size: 28px;color: #222;font-weight: 700;transition:.2s;} #section02 .con .periodic_box ul li div .box p.t_st01{line-height: 90px;} #section02 .con .periodic_box ul li div .box em{display: block;position: absolute;top: 7px;left: 0;width: 100%;text-align: center;color: #a1a2a3;font-size: 12px;font-weight: 500;} #section02 .date_box{display: flex;margin-top: 30px;align-items:center;justify-content: center;gap:20px;} #section02 .date_box p{font-size: 20px;color: #222;font-weight: 600;margin-left: 10px;} #section02 .date_box strong{font-size: 45px;color: #222;font-weight: 800;} #footer{background: #070817;line-height: 1;height: 360px !important;} #footer .fp-tableCell {height: 360px !important;} #footer .inner{display: flex;align-items:flex-start;justify-content: space-between;} #footer .left strong{display: block;font-size: 25px;font-weight: 600;font-family: 'Maven Pro';color: #fff;opacity: .7;margin-bottom: 35px;line-height: 32px;} #footer .left a{display: block;width: 197px;height: 50px;border-radius: 50px;font-size: 18px;font-weight: 500;text-align: center;line-height: 48px;color: #fff;background: #4f61ff;margin-bottom: 50px;} #footer .left p{font-size: 15px;color: #fff;opacity: .3;} #footer .right strong{display: block;font-size: 23px;color: #fff;opacity: .6;margin-bottom: 25px;} #footer .right ul{display: flex;gap:30px;margin-bottom: 70px;} #footer .right ul li{display: flex;gap:10px;align-items:center;} #footer .right ul li p{font-size: 16px;color: #fff;} #footer .right a{display: flex;justify-content: flex-end;} /* sub */ #footer.sub_footer .inner{height: 100%;align-items:center;} #sub_visual_wrap{position: relative;} #sub_visual_wrap h2{width: 100%;position: absolute;top: 50%;left: 0;transform:translateY(-50%);font-size: 70px;font-weight: 700;color: #fff;text-align: center;} #sub_visual_wrap .sub_menu{position: absolute;left: 0;bottom: 0;width: 100%;} #sub_visual_wrap .sub_menu ul{position: relative;top: 2px;display: flex;border-radius:15px 15px 0 0;background: #fff;height: 72px;gap:43px;align-items:center;padding: 0 40px;} #sub_visual_wrap .sub_menu ul li a{position: relative;font-size: 18px;color: #888;} #sub_visual_wrap .sub_menu ul li.on a{color: #4f61ff;} #sub_visual_wrap .sub_menu ul li:nth-child(2) a:after{content:'';position: absolute;left: -26px;top: 50%;transform:translateY(-50%);width: 4px;height: 4px;border-radius: 50%;background: #888;} #sub_visual_wrap .sub_menu ul li.on a:before{content:'';position: absolute;bottom: -8px;left: 50%;transform:translateX(-50%);width: 100%;height: 3px;background: #4f61ff;} #sub_contents{padding: 85px 0 150px;} #sub_contents .contop h3{font-size: 45px;color: #222;text-align: center;margin-bottom: 55px;line-height: 1;} /* 공통 */ .table_box{border: 1px solid #e3e6ea;border-radius: 10px;overflow:hidden;} table.table_st01{width: 100%;table-layout: fixed;} table.table_st01 tr th{height: 55px;text-align:center;background: #e3e6ea;font-size: 18px;color: #666e78;font-weight: 500;} table.table_st01 tr td{border-bottom: 1px solid #e3e6ea;height: 50px;text-align: center;font-size: 16px;color: #222;font-weight: 500;} table.table_st01 tr td.bl01{color: #4f61ff;} table.table_st01 tr td.bd_none{border-bottom: 0;} table.table_st01 tr td a{color: #222;} table.table_st01 tr td sub{font-size: 11px;} table.table_st01 tr:last-child td{border-bottom: 0;} /* sub0101 */ .sub0101_wrap .box{margin-bottom: 30px;} .sub0101_wrap .box:last-child{margin-bottom: 0;} .sub0101_wrap ul.dis{display: flex; gap:5px; flex-wrap:wrap;} .sub0101_wrap ul.dis li{border: 1px solid #dce0e4; padding: 5px 10px; border-radius:10px ;} .sub0101_wrap ul.data{display: flex; gap:5px; flex-wrap:wrap;} .sub0101_wrap ul.data li{width: calc((100% - 15px)/4); text-align: center; background: #f3f4f8; padding:20px 10px; border-radius:10px ;} .sub0101_wrap ul.data li p{color: #222; font-weight: 500; margin-bottom: 8px; padding-bottom: 8px; position: relative;} .sub0101_wrap ul.data li p:before{position: absolute; content: ''; width: 15px; height: 2px; background: #4f61ff; left: 50%; top: 32px; transform:translateX(-50%);} .sub0101_wrap ul.data li em{color: #8085a9; font-size: 22px; font-weight: 600; display: block;} /* sub0102 */ .sub0102_wrap .con{display: flex;} .sub0102_wrap .con:not(:last-child){margin-bottom: 50px;} .sub0102_wrap .con .tit{width: 400px; font-size: 32px; font-weight: 700; color: #4f61ff; line-height: 1;} .sub0102_wrap .con .txt_wrap{display: flex; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #ddd;} .sub0102_wrap .con .txt{ width: calc(100% - 400px);} .sub0102_wrap .con:last-child .txt{margin-bottom: 0;} .sub0102_wrap .con .txt p.sub_tit{font-size: 24px; color: #222; font-weight: 500; margin-bottom: 15px;} .sub0102_wrap .con .txt .link_btn a{color: #666; font-size: 20px; line-height: 1; border-left: 1px solid #ddd; padding-left: 15px; margin-left: 10px;} .sub0102_wrap .con .txt ul.info li{font-size: 16px; color: #666; margin-bottom: 10px;} .sub0102_wrap .con .txt ul.info li:last-child{margin-bottom: 0;} .sub0102_wrap .con .txt ul.info li img{vertical-align: sub; margin-right: 15px;} .sub0102_wrap .con .txt .in_con{display: flex; align-items: center} .sub0102_wrap .con .txt .in_con ul{width: 50%; font-size: 16px;} .sub0102_wrap .con .txt .in_con ul.stu_list{display: flex; gap:5px; flex-wrap:wrap;} .sub0102_wrap .con .txt .in_con ul.stu_list li{border: 1px solid #dce0e4; padding: 5px 10px; border-radius:10px ;} .sub0102_wrap .con .txt_wrap ul.car_list{background: #f3f4f8; padding: 50px; border-radius:15px ;} .sub0102_wrap .con .txt_wrap ul.car_list li{position: relative; padding-left: 13px; margin-bottom: 10px; color: #222;} .sub0102_wrap .con .txt_wrap ul.car_list li:before{position: absolute; content: ''; width: 3px; height: 3px; background: #4f61ff; border-radius:50%; left: 0; top: 11px;} .sub0102_wrap .con .txt_wrap ul.car_list li:last-child{margin-bottom: 0;} .toggle-body{display: none;} .toggle-head {cursor: pointer;} .toggle-head th span{position: relative;} .toggle-head th span::after{content:''; position: absolute; right: -20px; top: 50%; transform:translateY(-50%); background: url('/images/sub/main_lan_arw.png')center no-repeat; width: 9px; height: 7px; transition:.2s;} .toggle-head.on th span::after{transform: rotate(-180deg) translateY(50%);} /* sub0201_wrap */ #section02.sub0201_wrap:after{display: none;} #section02.sub0201_wrap .con{margin-bottom: 80px;} #section02.sub0201_wrap .con .inner{padding: 0 30px;border: 0;} #section02.sub0201_wrap .con form{justify-content: center;margin-bottom: 15px;} /* #section02.sub0201_wrap .con form input{width: 800px;height: 65px;font-size: 20px;} #section02.sub0201_wrap .con form input::placeholder{font-size: 20px;} #section02.sub0201_wrap .con form button{width: 65px;height: 65px;} #section02.sub0201_wrap .con form button img{width: 65px;} */ #section02.sub0201_wrap .con form {display:block;} #section02.sub0201_wrap .con form .input_box {display:flex; justify-content:center; gap: 10px; margin-bottom: 15px;} #section02.sub0201_wrap .con form .input_box input {width: 800px;height: 65px;font-size: 20px;border-radius: 10px;border: 3px solid #adb5c4;padding: 0 20px;font-size: 20px;color: #222;} #section02.sub0201_wrap .con form .input_box input::placeholder{font-size: 20px;} #section02.sub0201_wrap .con form .input_box button{width: 65px;height: 65px;} #section02.sub0201_wrap .con form .input_box button img{width: 65px;} #section02.sub0201_wrap .cate_wrap{margin-bottom: 30px; display: flex; justify-content: center; gap:20px; align-items: center;} #section02.sub0201_wrap .cate_wrap button{display: flex;gap:7px;width: 93px;height: 36px;border-radius:36px;background: #adb5c4;align-items:center;justify-content: center; color: #fff;} #section02.sub0201_wrap .cate_wrap button img{filter: invert(100%) sepia(0%) saturate(7393%) hue-rotate(297deg) brightness(116%) contrast(110%);;} #section02.sub0201_wrap .con .search_box{top: 94px; margin-top: 50px;} .sub0201_wrap .con02 .reset_box{display: flex;justify-content: flex-end;margin-bottom: 20px;} .sub0201_wrap .con02 .reset_box button{display: flex;gap:10px;width: 160px;height: 55px;border-radius:10px;background: #4f61ff;align-items:center;justify-content: center;} .sub0201_wrap .con02 .reset_box button span{font-size: 19px;color: #fff;font-weight: 500;} .sub0201_wrap .con02 .con_wrap{display: flex;justify-content: space-between;align-items:flex-start;margin-bottom: 40px; gap:20px;} .sub0201_wrap .con02 .con_wrap .box01{width: 380px;border-radius: 10px;overflow:hidden;border: 1px solid #ddd;} .sub0201_wrap .con02 .con_wrap .box01 .f_box{display: flex;height: 60px;background: #adb5c4;padding: 0 12px 0 30px;align-items:center;justify-content: space-between;} .sub0201_wrap .con02 .con_wrap .box01 .f_box p{font-size: 24px;font-weight: 600;color: #fff;} .sub0201_wrap .con02 .con_wrap .box01 .f_box button{display: flex;gap:7px;width: 93px;height: 36px;border-radius:36px;background: #fff;align-items:center;justify-content: center;} .sub0201_wrap .con02 .con_wrap .box01 .f_box button span{font-size: 15px;color: #222;} .sub0201_wrap .con02 .con_wrap .box01 .i_box{padding: 20px;} .sub0201_wrap .con02 .con_wrap .box01 .i_box ul li:not(:last-child){margin-bottom: 20px;} .sub0201_wrap .con02 .con_wrap .box01 .i_box ul li p{font-size: 18px;font-weight: 600;color: #222;margin-bottom: 10px;} .sub0201_wrap .con02 .con_wrap .box01 .i_box ul li input{padding: 0 10px;width: 100%;height: 45px;border-radius: 5px;background: #f1f1f1;font-size: 18px;color: #222;border: 0;} .sub0201_wrap .con02 .con_wrap .box01 .i_box ul li select{width: 100%;padding: 0 10PX;height: 45px;border-radius: 5px;font-size: 16px;color: #222;border: 1px solid #ddd;appearance: none;background:url(/images/sub/sub0201_ico03.png)right 10px center no-repeat;background-size:11px auto;} .sub0201_wrap .con02 .con_wrap .box01 .i_box button{text-align: center; background: #5d6480; color: #fff; padding: 12px; width: 160px; margin: 0 auto; display: block; border-radius:5px; margin-top: 20px;} .sub0201_wrap .con02 .con_wrap .box02{width: 1060px;} #section02.sub0201_wrap .date_box{width: 624px;height: 113px;border-radius: 10px;border: 1px solid #e3e6ea;margin: 0 auto;} /* sub0201_view */ .sub0201_view{line-height: 1;} .sub0201_view .con01{display: flex;padding: 0 40px;border-radius: 10px;border: 1px solid #e3e6ea;background: #f7f7f8;height: 60px;margin-bottom: 10px;align-items:center;justify-content: space-between;} .sub0201_view .con01 p{font-size: 18px;font-weight: 600;color: #222;} .sub0201_view .con01 ul{display: flex;gap:35px;} .sub0201_view .con01 ul li{position: relative;font-size: 17px;color: #62626e;} .sub0201_view .con01 ul li:after{content:'';position: absolute;right: -19px;top: 50%;transform:translateY(-50%);width: 3px;height: 3px;border-radius:50%;background: #4f61ff;} .sub0201_view .con01 ul li:last-child:after{display: none;} .sub0201_view .con01 ul li sub{font-size: 11px;} .sub0201_view .con02{display: flex;justify-content: space-between;align-items:flex-start;margin-bottom: 10px;} .sub0201_view .con02 .box01{width: 500px;} .sub0201_view .con02 .box01 .img_box{position:relative; width:100%; padding-bottom:100%;margin-bottom: 12px;border-radius: 10px;border: 1px solid #e3e6ea;overflow:hidden;} .sub0201_view .con02 .box01 .img_box img{position:absolute;left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%} .sub0201_view .con02 .box01 .ex_box{display: flex;padding: 0 12px 0 30px;height: 60px;border-radius: 60px;background: #adb5c4;align-items:center;justify-content: space-between;} .sub0201_view .con02 .box01 .ex_box p{font-size: 24px;color: #fff;font-weight: 600;} .sub0201_view .con02 .box01 .ex_box ul{display: flex;gap:5px;} .sub0201_view .con02 .box01 .ex_box ul li button{width: 100px;height: 36px;border-radius: 25px;background: #fff;font-size: 15px;color: #222;} .sub0201_view .con02 .box02{width: 949px;} .sub0201_view .con02 .box02 .table_box:nth-child(1){margin-bottom: 10px;} .sub0201_view .con03{margin-bottom: 10px;} .sub0201_view .con04{margin-bottom: 10px;} .sub0201_view .con04 ul{display: flex;flex-wrap:wrap;border-radius: 10px;border: 1px solid #e3e6ea;} .sub0201_view .con04 ul li{display: flex;width: calc((100%)/3);height: 50px;padding: 0 30px;border-right: 1px solid #e3e6ea;border-top: 1px solid #e3e6ea;align-items:center;justify-content: space-between;} .sub0201_view .con04 ul li:nth-child(1), .sub0201_view .con04 ul li:nth-child(2), .sub0201_view .con04 ul li:nth-child(3){border-top: 0;} .sub0201_view .con04 ul li:nth-child(3n){border-right: 0;} .sub0201_view .con04 ul li p{font-size: 16px;color: #222;font-weight: 500;} .sub0201_view .con05{display: flex;justify-content: space-between;margin-bottom: 10px;} .sub0201_view .con05 .table_box{width: 725px;} .sub0201_view .con05 .table_box:nth-child(2) table tr:last-child td{border-bottom: 1px solid #e3e6ea;} .sub0201_view .con06{display: flex;justify-content: space-between;} .sub0201_view .con06 .table_box{width: 725px;} .sub0201_view .con06 .table_box tr td .img_box{position:relative; width:100%; padding-bottom:56.138%;} .sub0201_view .con06 .table_box tr td .img_box img{position:absolute;left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%} /* sub0301 */ .sub0301_wrap{border-top: 2px solid #4f61ff; } .sub0301_wrap .con{border-bottom: 1px solid #ddd; transition:.3s;} .sub0301_wrap .con:hover{background: #f5f6fc;} .sub0301_wrap .con a{padding:35px; display: flex; } .sub0301_wrap .con span.num{width: 180px; display: block; font-size: 30px; font-weight: 700; color: #222; line-height: 1; transition:.3s;} .sub0301_wrap .con:hover span.num{color: #4f61ff;} .sub0301_wrap .con p{width: calc(100% - 180px); display: block; font-size: 16px; color: #555; line-height: 1.7;}