/* Common **********************************************************************/ /* @import url(http://assets_2023/fonts.googleapis.com/earlyaccess/nanumgothic.css); <-- 기존에 있던 것 */ /* Nanum Gothic (Korean) http://www.google.com/assets_2023/fonts/earlyaccess */ @font-face { font-family: 'Pretendard'; font-weight: 100; src: url('/assets_2023/font/Pretendard-Thin.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 200; src: url('/assets_2023/font/Pretendard-ExtraLight.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 300; src: url('/assets_2023/font/Pretendard-Light.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 400; src: url('/assets_2023/font/Pretendard-Regular.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 500; src: url('/assets_2023/font/Pretendard-Medium.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 600; src: url('/assets_2023/font/Pretendard-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 700; src: url('/assets_2023/font/Pretendard-Bold.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 800; src: url('/assets_2023/font/Pretendard-ExtraBold.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 900; src: url('/assets_2023/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:13px; line-height:1.6;font-family: 'Pretendard'; color:#7d7d7d;} 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 */assets_2023/font-size:14px; color:#c3c3c3;} .login_mid .login_con input::-moz-placeholder { /* Firefox 19+ */assets_2023/font-size:14px; color:#c3c3c3;} .login_mid .login_con input:-ms-input-placeholder { /* IE 10+ */assets_2023/font-size:14px; color:#c3c3c3;} .login_mid .login_con input:-moz-placeholder { /* Firefox 18- */assets_2023/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;} .pc_img {display:block;} .tab_img {display:none;} .mob_img {display:none;} .pc {display:block;} .tab {display:none;} .mob {display:none;} /* ==main== */ #wrap{ position: relative; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden;min-width: 1800px;} .inner{width: 1720px; margin: 0 auto; max-width:100%;} #header{position: relative;z-index: 2000;border-bottom: 1px solid #ddd;padding-top: 50px;} #header .inner{display: flex;width: 1720px;justify-content: space-between;} #header .btn_box{display: none;} #header .back_2024{display:flex;} #header .back_2024 .arrow_wrap{margin-left:20px; margin-top:26px;} #header .back_2024 p{font-size:15px; font-weight:bold; color:#222;} /* .back_2024 h1 img:hover .ck{border:1px solid #222;} */ /* gnb */ #header .gnb{position: relative;display: flex;/* gap:163px; */align-items:center;} #header .gnb > li{position: relative;width: 270px;} #header .gnb > li:after{content:'';position: absolute;right: 0px;top: 50%;transform:translateY(-50%);width: 3px;height: 20px;background: #000;} #header .gnb > li:last-child:after{display: none;} #header .gnb li span a{position: relative;transition:.3s;display: block;height: 100%;;text-align: center;line-height: 114px;font-size: 24px; color: #000; font-weight: 600;transition:.2s;} #header .gnb .lnb_sub{display: none;position: absolute;z-index: 100;left: 50%; transform: translateX(-50%); top: 100%;} #header .gnb .lnb_sub .sub_menu{position: relative;background: rgba(0,0,0,.6);width: 270px;padding: 30px 0;} #header .gnb .lnb_sub li{margin-bottom: 20px;} #header .gnb .lnb_sub li:last-child{margin-bottom: 0;} #header .gnb .lnb_sub li a{display: block;font-size: 22px; color: #fff;font-weight: 500;transition:.3s;line-height: 1;text-align: center;word-break: keep-all;} .navigation{display: none;} #visual_wrap{position: relative;padding-top: 216px;line-height: 1;margin-bottom: 30px;} #visual_wrap .inner{padding-right: 260px;} #visual_wrap .con01{position: relative;margin-bottom: 50px;z-index: 3000;transform: translateX(-200px) translateY(50px);opacity: 0;} #visual_wrap.on .con01{animation:txt01-1 ease 1s forwards;} #visual_wrap.on .con01-1{animation:txt01-2 ease 1s forwards;} #visual_wrap .con01 .img_box{display: flex;justify-content: flex-end;margin-bottom: 30px;} #visual_wrap .con01 p{font-size: 82px;color: #000;text-align: right;} #visual_wrap .con01 p:nth-child(2){margin-bottom: 20px;} #visual_wrap .con01 p span{font-weight: 700;} @keyframes txt01{ 0%{transform: skewX(349deg) translateX(-200px) translateY(50px);opacity: 0;} 100%{transform: skewX(360deg) translateX(0px) translateY(0px);opacity: 1;} } @keyframes txt01-1{ 0%{transform: translateY(-200px) translateY(50px);opacity: 0;} 100%{transform: translateY(0px) translateY(0px);opacity: 1;} } @keyframes txt01-2{ 0%{transform: translateY(-300px) translateY(50px);opacity: 0;} 100%{transform: translateY(0px) translateY(0px);opacity: 1;} } #visual_wrap .ani > div{position: absolute;} #visual_wrap .ani > div .box{border-radius: 50%;transform-origin: 48%;animation:ro01 linear 10s infinite forwards;} #visual_wrap .ani > div:nth-child(odd) .box{transform-origin: 49%;animation:ro01 linear 7s infinite forwards;} #visual_wrap .ani > div:nth-child(3n) .box{animation:ro01 linear 15s infinite forwards;} #visual_wrap .c_y_b{left: 208px;bottom: 280px;transform:translateX(-100%);opacity: 0;z-index: 400;} #visual_wrap .c_y_b .box{width: 350px;height: 350px;transition:.3s;background: #fdab3d;} #visual_wrap.on .c_y_b{animation:ani01 ease 1s forwards;animation-delay:.3s;} #visual_wrap .c_r{left: 125px;bottom: 450px;transform:translateX(-100%);opacity: 0;z-index: 800;} #visual_wrap .c_r .box{width: 230px;height: 230px;background: #d4363a;} #visual_wrap.on .c_r{animation:ani01 ease 1s forwards;animation-delay:.6s;} #visual_wrap .c_w_b02{top: 400px;left: 672px;transform:translateX(-100%);opacity: 0;z-index: 1200;} #visual_wrap .c_w_b02 .box{width: 280px;height: 280px;background: rgba(238,238,238,.6);} #visual_wrap.on .c_w_b02{animation:ani01 ease 1s forwards;animation-delay:.9s;} #visual_wrap .c_g_b{top: 247px;left: 235px;transform:translateX(-100%);opacity: 0;z-index:1000;} #visual_wrap .c_g_b .box{width: 580px;height: 580px;background: #33bc91;} #visual_wrap.on .c_g_b{animation:ani01 ease 1s forwards;animation-delay:1.2s;} #visual_wrap .c_y_s{top: 50px;right: 30px;transform:translateX(100%);opacity: 0;} #visual_wrap .c_y_s .box{width: 280px;height: 280px;background: #fdab3d;} #visual_wrap.on .c_y_s{animation:ani02-1 ease 2s forwards;animation-delay:1.5s;} #visual_wrap .c_w_s{right: 95px;bottom: 430px;transform:translateX(100%);opacity: 0;z-index: 1000;} #visual_wrap .c_w_s .box{width: 250px;height: 250px;background: rgba(238,238,238,.6);} #visual_wrap.on .c_w_s{animation:ani02 ease 1s forwards;animation-delay:1.8s;} #visual_wrap .c_g_s{right: 240px;bottom: 415px;transform:translateX(100%);opacity: 0;z-index: 800;} #visual_wrap .c_g_s .box{width: 170px;height: 170px;background: #33bc91;} #visual_wrap.on .c_g_s{animation:ani02 ease 1s forwards;animation-delay:2.1s;} #visual_wrap .c_w_b01{bottom: -340px;left: 465px;transform:translateX(100%);opacity: 0;z-index: 200;} #visual_wrap .c_w_b01 .box{width: 610px;height: 610px;background: #fff;} #visual_wrap .c_w_b01.on{animation:ani05 ease 2s forwards;animation-delay:.5s;} #visual_wrap .sq{left: 352px;top: 530px;width: 406px;height: 150px;border: 1px solid #000;z-index: 1400;transform:scale(0);} #visual_wrap.on .sq{animation:ani04 ease 1s forwards;animation-delay:2.5s;} @keyframes ani01{ 0%{transform:translateX(-100%);opacity: 0;} 100%{transform:translateX(0%);opacity: 1;} } @keyframes ani02{ 0%{transform:translateX(100%);opacity: 0;} 100%{transform:translateX(0%);opacity: 1;} } @keyframes ani02-1{ 0%{transform:translateX(100%);opacity: 0;} 40%{transform:translateX(0%);opacity: 1;} 100%{transform:translateY(60%);opacity: 1;} } /* @keyframes ro01{ 0%{transform:translatey(-20px);} 25%{transform:translatey(0px) translateX(20px);} 50%{transform:translatey(20px) translateX(0px)} 75%{transform:translatey(0px) translateX(-20px)} 100%{transform:translatey(-20px) translateX(0px)} } */ @keyframes ro01{ 0%{transform: rotate(0);} 100%{transform: rotate(360deg);} } #visual_wrap .con02 ul{display: flex;height: 525px;} #visual_wrap .con02 ul li{flex:1;/* background: #5c2583; */background: #5b00bc;transition:.7s;z-index: 200;} #visual_wrap .con02 ul li:nth-child(2){/* background: #0c81af; */background: #0071ce;} #visual_wrap .con02 ul li:last-child{position: relative;background: #fff;} #visual_wrap .con02 ul li:last-child:after{content:'';position: absolute;top: 0;left: 0;width:calc(100% + 2px);height: 100%;transition:1s;border: 1px solid #6f6f6f;transform:scale(0);} #visual_wrap .con02 ul li:nth-child(1){height: 250%;} #visual_wrap .con02 ul li:nth-child(2){height: 130%;} #visual_wrap .con02 ul li:nth-child(3){height: 180%;} #visual_wrap .con02 ul li:nth-child(4){height: 100%;} #visual_wrap .con02 ul.on li:nth-child(1){height: 100%;} #visual_wrap .con02 ul.on li:nth-child(2){height: 100%;} #visual_wrap .con02 ul.on li:nth-child(3){height: 100%;} #visual_wrap .con02 ul.on li:nth-child(4){height: 50%;} #visual_wrap .con02 ul.on li:nth-child(5):after {transform:scale(1);} /* 공통 */ a.h_ani01{display: block;transition:.3s;width: fit-content;} a.h_ani01:hover{transform:translateX(50px)} #section01{position: relative;line-height: 1;padding: 430px 0 220px;/* background: #fdab3d; */background: #fcb43f;} #section01:after{content:'';position: absolute;left: 55%;transform:translateX(-50%);width: 1px;height: 100%;background: #000;opacity: .4;top: 0;} #section01 .inner{position: relative;} #section01 .inner:after{content:'';position: absolute;transform:translateX(100%);opacity: 0;bottom: -390px;right: 0px;width: 420px;height: 420px;border-radius: 50%;background: #5b00bc;z-index: 600;} #section01 .inner.on:after{animation:ani05 ease 2s forwards;} #section01 .txt{padding-left: 20px;skewX(10deg) translateX(100px) translateY(50px);opacity: 0;} #section01 .inner.on .txt{animation:txt02 ease 1s forwards;} #section01 .txt h2{font-size: 100px;color: #000;font-weight: 700;margin-bottom: 80px;} #section01 .txt strong{display: block;font-size: 50px;color: #2a2a2a;margin-bottom: 15px;} #section01 .txt p{font-size: 50px;line-height: 60px;color: #2a2a2a;font-weight: 500;margin-bottom: 65px;} @keyframes txt02{ 0%{transform: skewX(10deg) translateX(100px) translateY(50px);opacity: 0;} 100%{transform: skewX(0deg) translateX(0px) translateY(0px);opacity: 1;} } #section02{position: relative;line-height: 1;background: #fdab3d;margin-bottom: 30px;} #section02:after{content:'';position: absolute;left: 55%;transform:translateX(-50%);width: 1px;height: 100%;background: #000;opacity: .4;top: 0;} #section02 ul{position: relative;display: flex;z-index: 300;} #section02 ul li{position: relative;width: 370px;overflow:hidden;transform:translateY(400px);transition:1s;} #section02 ul li:nth-child(2){transition:1.3s;} #section02 ul li:nth-child(3){transition:1.6s;} #section02.on ul li{transform:translateY(0px);} #section02 ul li:last-child{position: relative;display: flex;transform:translateY(0px);align-items:flex-end;justify-content: flex-end;overflow:visible;z-index: 1;width: calc(100% - 1110px);padding: 0 100px 80px 0;background: #fff;} #section02 ul li:last-child:after{content:'';position: absolute;transition:1s;right: 0;top: -200px;width: 50%;height: 200px;z-index: 100;background: #fff;} #section02.on ul li:last-child:after{top: 0;} #section02 ul li:last-child:before{content:'';position: absolute;transition:1s;left: 0;top: -100px;width: 50%;height: 100px;z-index: 100;background: #fff;} #section02.on ul li:last-child:before{top: -50px;height: 50px;} #section02 ul li:last-child .txt{transform: skewX(349deg) translateX(-200px) translateY(50px);opacity: 0;} #section02.on ul li:last-child .txt{animation:txt01 ease 1s forwards;} #section02 ul li:last-child h2{font-size: 100px;font-weight: 700;color: #000;margin-bottom: 70px;text-align: right;} #section02 ul li:last-child p{font-size: 50px;color: #2a2a2a;margin-bottom: 50px;text-align: right;} #section02 ul li:last-child p:nth-child(4)P{margin-bottom: 80px;} #section02 ul li:last-child a{display: flex;justify-content: flex-end;} #section02 ul li img{transition:.7s;/* transform:scale(1.1) */} /* #section02.on ul li a img{transform:scale(1)} */ #section02 ul li:not(:last-child):hover img{transform:translateX(-60px)} #section02 .circle .c_g{position: absolute;transform:translateX(-100%);opacity: 0;left: 540px;bottom: 120px;z-index: 600;width: 400px;height: 400px;border-radius:50%;background: #33bc91;} #section02.on .circle .c_g{animation:ani03 ease 2s forwards;animation-delay:1s;} #section02 .circle .c_w{position: absolute;transform:translateX(-100%);opacity: 0;bottom: -350px;left: 280px;z-index: 500;width: 650px;height: 650px;border-radius: 50%;background: #fff;} #section02.on .circle .c_w{animation:ani01 ease 1.5s forwards;animation-delay:.5s;} @keyframes ani03{ 0%{transform:translateX(-100%);opacity: 0;} 55%{transform:translateX(25%);opacity: 1;} 100%{transform:translateX(0%);opacity: 1;} } #section02 .a_box{position: absolute;display: flex;left: 0;bottom: 35px;width: 100%;} #section02 .a_box a{display: flex;width: 370px;z-index: 1500;padding: 35px 50px;align-items:center;} #section02 .a_box a img{transition:.3s;} #section02 .a_box a:hover img{transform:translateX(20px)} #section03{position: relative;padding: 415px 0 256px;line-height: 1;background: #5b00bc;} #section03:after{content:'';position: absolute;left: 55%;transform:translateX(-50%);width: 1px;height: 100%;background: #fff;top: 0;} #section03 .inner{padding-left: 20px;} #section03 .txt{padding-left: 20px;skewX(10deg) translateX(100px) translateY(50px);opacity: 0;} #section03.on .txt{animation:txt02 ease 1s forwards;} #section03 .txt h2{font-size: 100px;font-weight: 700;color: #fff;margin-bottom: 70px;} #section03 .txt p{font-size: 50px;color: #fff;margin-bottom: 50px;} #section03 .txt p:nth-child(4){margin-bottom: 80px;} #section03 .txt a{} @keyframes txt02{ 0%{transform: skewX(10deg) translateX(100px) translateY(50px);opacity: 0;} 100%{transform: skewX(0deg) translateX(0px) translateY(0px);opacity: 1;} } #section03 .ani_box .sq{position: absolute;transform:scale(0);right: 265px;top: 180px;width: 525px;height: 395px;border: 1px solid #fff;z-index: 1000;} #section03 .ani_box.on .sq{animation:ani04 ease 1s forwards;animation-delay:1s;} #section03 .ani_box .c_b{position: absolute;transform:translateX(100%);opacity: 0;right: 126px;bottom: 293px;width: 520px;height: 520px;border-radius:50%;background: #0071ce;z-index: 800;} #section03 .ani_box.on .c_b{animation:ani02 ease 1.5s forwards;} #section03 .ani_box .c_r{position: absolute;transform:translateX(100%);opacity: 0;bottom: 18px;right: 265px;width: 405px;height: 405px;border-radius: 50%;background: #d8282b;z-index: 900;} #section03 .ani_box.on .c_r{animation:ani05 ease 2s forwards;animation-delay:.5s;} @keyframes ani04{ 0%{transform:scale(0)} 100%{transform:scale(1)} } @keyframes ani05{ 0%{transform:translateX(100%);opacity: 0;} 55%{transform:translateX(-25%);opacity: 1;} 100%{transform:translateX(0%);opacity: 1;} } #section04{position: relative;line-height: 1;height: 1000px;z-index: 300;background: #0071ce;} #section04:after{content:'';position: absolute;transform:translateX(100%);opacity: 0;right: 186px;top: 130px;border-radius: 50%;width: 280px;height: 280px;background: #fdab3d;} #section04.on:after{animation:ani05 ease 2s forwards;animation-delay:.5s;} /* #section04.on{animation:bg01 ease 1s forwards;} */ @keyframes bg01{ 0%{background: #fff;} 99%{background: #fff;} 100%{background: #0c81af;} } #section04 ul{display: flex;height: 100%;} #section04 ul li{position: relative;flex:1;background: #0071ce;/* height: 0; */} /* #section04.on ul li{height: 100%;} */ #section04 ul li:nth-child(2){transition:1s;} #section04.on ul li:nth-child(2){} #section04 ul li:nth-child(2):after{content:'';position: absolute;top: -100px;width: 100%;height: 100px;background: #fff;} #section04 ul li:nth-child(2):before{content:'';position: absolute;left: 0;top: 0;width: 100%;transition:1s;height: 60px;background: #fdab3d;} /* #section04 ul li:nth-child(3){transform:translateY(500px);transition:1s;} #section04 ul li:nth-child(4){transform:translateY(500px);transition:1.5s} */ #section04 ul li:nth-child(3){transform:translateY(-100px);} #section04 ul li:nth-child(4){transform:translateY(-100px);} #section04 ul li:nth-child(3):after{content:'';position: absolute;height: 540px;top: -40px;left: 0;width: 100%;background: #fff;z-index: 300;transition:1s;} #section04 ul li:nth-child(4):after{content:'';position: absolute;height: 540px;top: -40px;left: 0;width: 100%;background: #fff;z-index: 300;transition:1.5s;} #section04.on ul li:nth-child(3):after, #section04.on ul li:nth-child(4):after{height: 40px;} #section04 .inner{position: absolute;left: 50%;top: 352px;transform:translateX(-50%);color: #fff;text-align: center;z-index: 1000;} #section04 .inner .txt{transform: skewX(349deg) translateX(-200px) translateY(50px);opacity: 0;} #section04.on .inner .txt{animation:txt01 ease 1s forwards;} #section04 .inner h2{font-size: 100px;font-weight: 700;margin-bottom: 35px;} #section04 .inner p{font-size: 30px;font-weight: 500;margin-bottom: 46px;} #section04 .inner .a_box{display: flex;justify-content: flex-end;padding-right: 85px;} #footer {position: relative;line-height: 1;color: #000;z-index: 2000;background: #f1f1f1;} #footer .inner{width: 1680px;} #footer .top{border-bottom: 1px solid #ddd;} #footer .top ul{display: flex;gap:100px;height: 120px;align-items:center;justify-content: center;} #footer .top ul li{position: relative;} #footer .top ul li:after{content:'';position: absolute;right: -50px;top: 50%;transform:translateY(-50%);width: 1px;height: 40px;background: #ddd;} #footer .top ul li:last-child:after{display: none;} #footer .top ul li:last-child a {pointer-events: none; cursor: default;} #footer .bottom{padding: 40px 0 60px;} #footer .bottom .inner{display: flex;align-items:flex-end; justify-content: space-between;} #footer .bottom .left ul{display: flex;gap:40px;margin-bottom: 20px;} #footer .bottom .left ul li a{font-size: 16px;font-weight: 600;color: #000;} #footer .bottom .left address p{font-size: 15px;font-weight: 300;} #footer .bottom .left address p:nth-child(1){margin-bottom: 10px;} #footer .bottom .copy{font-size: 15px;font-weight: 300;} /* ========================================================= */ #wrap.wrap_bg01{background: #fffcb4;} #wrap.wrap_bg02{background: #e4b4ff;} #wrap.wrap_bg03{background: #b4e9ff;} #wrap.wrap_bg04{background: #D5FFD5;} #header.sub_header{border-bottom: 1px solid #000;} #footer.sub_footer .top{border-bottom: 1px solid #000;} #footer.sub_footer .top ul li a img{filter: brightness(0);} #footer.sub_footer .top ul li:after{background: #000;} #footer.sub_footer {background: none;} .conbody{/* position: relative; */} #sub_contents{position: relative;display: flex; padding: 170px 0px 220px;min-height: 100vh;} #sub_contents .sub_inner{width: 1300px; } #sub_contents .sub_icon_wrap p{position: fixed;z-index: 0;transition:.7s;} #sub_contents .sub_icon_wrap p:nth-child(1){position: absolute;left: 50%; transform:translateX(-50%); top: 40px;z-index: 100;} #sub_contents .sub_icon_wrap p:nth-child(2){left: 40px;top: 70%;} #sub_contents .sub_icon_wrap p:nth-child(3){right: 40px;top: 70%;} #sub_contents .sub_icon_wrap p:nth-child(4){left: 50%; transform:translateX(-50%); bottom: 60px;} #sub_contents .sub_icon_wrap p:nth-child(1).rel{position: fixed;top: 40px;} #sub_contents .sub_icon_wrap p:nth-child(2).rel{position: absolute; top: calc(100% - 300px); } #sub_contents .sub_icon_wrap p:nth-child(3).rel{position: absolute; top: calc(100% - 300px); } #sub_contents .sub_icon_wrap p:nth-child(4).rel{position: absolute; bottom: 60px;} .sub_menu_box{position: fixed;width: 210px;margin-left: 40px; line-height: 1;transition:.7s;bottom: 330px;} .sub_menu_box h2.sub_menu_tit{font-size: 28px; color: #000; font-weight: 800;margin-bottom: 25px;} .sub_menu_box .lnb h3 a{display: block;font-size: 18px; color: #000; font-weight: 500;line-height: 24px;margin-bottom: 20px;} .sub_menu_box .lnb h3 a i{display: block;} .sub_menu_box .lnb h3.on a{font-weight: 800;} .sub_menu_box.rel{position: absolute; bottom: 350px;} .sub_menu_box{display:none;} /* 공통 */ h3.h3_tit{font-size: 50px; color: #000; font-weight: 700;margin-bottom: 30px;} /* list_st01 */ .list_st01_wrap{line-height: 1;} .list_st01_wrap .top_txt{margin-bottom: 50px;} .list_st01_wrap .top_txt p{font-size: 18px; color: #000; line-height: 1.6;text-align: center;font-weight: 600;} .list_st01_wrap ul{display: flex;flex-wrap:wrap;gap:80px;} .list_st01_wrap ul li{width: calc((100% - 80px) / 2);} .list_st01_wrap ul li .img_wrap{position:relative; width:100%; padding-bottom:54.878%;border:1px solid #000;background: #000;} .list_st01_wrap ul li .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .list_st01_wrap ul li .txt_wrap{display: flex;align-items: center;justify-content: space-between;padding: 20px 30px;} .list_st01_wrap ul li .txt_wrap .txt{width: calc(100% - 180px);} .list_st01_wrap ul li .txt_wrap .txt p{font-size: 40px; color: #000; font-weight: 700; line-height: 50px;} .list_st01_wrap ul li .txt_wrap .txt span{display: block;font-size: 20px; color: #000; line-height: 1.5;margin-top: 15px;} .list_st01_wrap ul li .txt_wrap .icon img{filter:brightness(0);} .list_st01_wrap ul.list_st01-2 li{width: 100%;} .list_st01_wrap ul.list_st01-2 li .img_wrap{padding-bottom: 28.571%;} /*view_st01*/ .view_st01_wrap{line-height: 1;} .view_st01_wrap .tit_wrap{margin-bottom: 85px;} .view_st01_wrap .tit_wrap p{font-size: 60px; color: #000; font-weight: 700;} .view_st01_wrap .tit_wrap span{display: flex;gap:75px;margin-top: 30px;} .view_st01_wrap .tit_wrap span em{position: relative;font-size: 24px; color: #000;font-weight: 400;} .view_st01_wrap .tit_wrap span em:not(:last-child)::after{content:'|';position: absolute; right: -41px; top: 50%; transform:translateY(-50%);} .view_st01_wrap .view_wrap .img_con{position: relative;width: 1130px; margin: 0 auto 80px;} .view_st01_wrap .view_wrap .img_con .play_btn{position: absolute; top: 50%; left: 50%;transform:translate(-50%,-50%);} .view_st01_wrap .view_wrap .img_con .img_wrap{position:relative; width:100%; padding-bottom:54.867%;border:1px solid #000;background: #000;} .view_st01_wrap .view_wrap .img_con .img_wrap img, .view_st01_wrap .view_wrap .img_con .img_wrap video, .view_st01_wrap .view_wrap .img_con .img_wrap iframe{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%;} .view_st01_wrap .view_wrap .slide_con{width: 1350px;margin: 0 auto 80px;} .view_st01_wrap .view_wrap .slide_con ul li .img_wrap{position:relative; width:100%; padding-bottom:54.867%;border:1px solid #000;background: #000;} .view_st01_wrap .view_wrap .slide_con ul li .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .view_st01_wrap .view_wrap .slide_con .slick-prev{position: absolute;left: -100px; top: 50%;transform:translateY(-50%);width: 60px; height: 60px; background: url(/assets_2025/images/sub/prev01.png)center no-repeat; background-size: cover;z-index: 100;text-indent: -9999px;} .view_st01_wrap .view_wrap .slide_con .slick-next{position: absolute;right: -100px; top: 50%;transform:translateY(-50%);width: 60px; height: 60px; background: url(/assets_2025/images/sub/next01.png)center no-repeat; background-size: cover;z-index: 100;text-indent: -9999px;} .view_st01_wrap .view_wrap .txt_con{border-top: 1px solid #000;} .view_st01_wrap .view_wrap .txt_con .txt{padding: 50px;border-bottom: 1px solid #000;} .view_st01_wrap .view_wrap .txt_con .txt strong{display: block;font-size: 32px; color: #000; font-weight: 700;margin-bottom: 20px;} .view_st01_wrap .view_wrap .txt_con .txt .p_con{display: flex;gap:40px;} .view_st01_wrap .view_wrap .txt_con .txt .p_con img{width: 160px; height: 160px;} .view_st01_wrap .view_wrap .txt_con .txt p{font-size: 18px; color: #000; line-height: 32px;} .view_st01_wrap .view_wrap .txt_con .txt p b{display: block;font-size: 22px; color: #000; font-weight: 700; line-height: 32px;margin-bottom: 15px;} .view_st01_wrap .view_wrap .txt_con .txt p b em{font-size: 20px;font-weight: 700; } .view_st01_wrap a.list_btn{display: flex;align-items: center; justify-content: center;width: 200px; height: 54px; font-size: 18px;color: #000; border:1px solid #000;margin: 60px auto 0;} /* sub0101 */ .sub0101_wrap {padding: 0 0 0 30px;} .sub0101_wrap i {display: block;} .sub0101_wrap p,span,b {word-break: keep-all;} .sub0101_wrap span.tit {font-size: 40px; color: #000; font-weight: 700; display: block; border-bottom: 2px solid #000; margin-bottom: 40px; padding-bottom: 40px;} .sub0101_wrap span.con_tit {font-size: 20px; color: #000; font-weight: 700; display: block; } .sub0101_wrap .txt_wrap {margin-bottom: 100px;} .sub0101_wrap .txt_wrap p.p_con {font-size: 16px; color: #000; font-weight: 400; margin-bottom: 30px;} .sub0101_wrap .txt_wrap p.p_con:last-child {margin-bottom: 0;} .sub0101_wrap span.tit02 {font-size: 30px; color: #000; font-weight: 700; display: block; border-bottom: 2px solid #000; margin-bottom: 30px; padding-bottom: 30px;} .sub0101_wrap .txt_wrap02 {} .sub0101_wrap .txt_wrap02 p.p_con02 {font-size: 20px; color: #000; font-weight: 400; margin-bottom: 10px;} .sub0101_wrap .txt_wrap02 p.p_con02:last-child {margin-bottom: 0;} .sub0101_wrap .txt_wrap02 p.p_con02 b {font-weight: 700;} /* sub0102 */ .sub0102_wrap{line-height: 1;} .sub0102_wrap .con{padding: 50px;background: #fff; border:1px solid #000;} .sub0102_wrap .con:not(:last-child){border-bottom: none;} .sub0102_wrap .con .top{display: flex;gap:40px;align-items: end; margin-bottom: 50px;} .sub0102_wrap .con .top .img_box{width: 300px;} .sub0102_wrap .con .top .img_wrap{position:relative; width:100%; padding-bottom:127.333%;} .sub0102_wrap .con .top .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .sub0102_wrap .con .top .txt_box p{font-size: 24px; color: #000; font-weight: 600;margin-bottom: 20px;} .sub0102_wrap .con .top .txt_box span{display: block;font-size: 18px; color: #5c2e75; font-weight: 300;margin-bottom: 20px;} .sub0102_wrap .con .bot p{font-size: 16px; color: #000; font-weight: 300; line-height: 30px;word-break: keep-all;} .sub0102_wrap .con .bot p i{display: block;} .sub0102_wrap .con .bot b{display: block;padding: 15px 0px;} /* sub0104 */ .sub0104_wrap {} .sub0104_wrap th,td {word-break: keep-all;} .sub0104_wrap .table_wrap {} .sub0104_wrap .table_wrap_tm {display: none;} .sub0104_wrap .table_wrap table {border: 2px solid #000; width: 100%;} .sub0104_wrap .table_wrap table th.th_tit {font-size: 26px; padding: 10px; font-weight: 500; color: #fff; background: #000; border-right: 1px solid #fff; text-align: center;} .sub0104_wrap .table_wrap table th.th_tit:last-child {border-right: 0;} .sub0104_wrap .table_wrap table th.ct {font-size: 20px; padding: 10px; font-weight: 600; color: #000; border-bottom: 1px solid #000; text-align: center; border-right: 1px solid #000;} .sub0104_wrap .table_wrap table td {font-size: 16px; padding: 10px; font-weight: 400; color: #000; border-bottom: 1px solid #000; text-align: center; border-right: 1px solid #000;} .sub0104_wrap .table_wrap table td a {color: #000;} .sub0104_wrap .table_wrap table td.td_con {text-align: left;} /* sub0201 */ .sub0201_wrap{line-height: 1;} .sub0201_wrap .tit_wrap{margin-bottom: 60px;} .sub0201_wrap .tit_wrap p{text-align: center;font-size: 18px; color: #000; font-weight: 600; line-height: 32px; word-break: keep-all;} .sub0201_wrap .tit_wrap p i{display: block;} .sub0201_wrap .tab_menu_wrap{display: flex;gap:94px; justify-content:center;margin-bottom: 30px;} .sub0201_wrap .tab_menu_wrap a{display: block; width: 200px; height: 45px; line-height: 40px;font-size: 16px; font-weight: 600; color: #000; text-align: center; border:2px solid #000;transition:.6s;} .sub0201_wrap .tab_menu_wrap a.on{background: #fff;} .sub0201_wrap .tab_menu_wrap a:hover{background: #fff;} .sub0201_wrap .con_wrap{display: flex; flex-wrap:wrap;gap:40px 20px;} .sub0201_wrap .con_wrap .con{width: calc((100% - 20px) / 2); border:2px solid #000;} .sub0201_wrap .con_wrap .con .img_wrap{position:relative; width:100%; padding-bottom:55.072%;background: #000;} .sub0201_wrap .con_wrap .con .img_wrap img{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .sub0201_wrap .con_wrap .con .txt_wrap{/* height: 90px; */background: #fff; padding: 17px 19px;} .sub0201_wrap .con_wrap .con .txt_wrap p{font-size: 32px; color: #000; font-weight: 900;margin-bottom: 10px;} .sub0201_wrap .con_wrap .con .txt_wrap span{font-size: 16px; color: #000; font-weight: 500;} /* sub0201_view */ .sub0201_view_wrap{line-height: 1;} .sub0201_view_wrap .view_tit{padding-bottom: 30px; margin-bottom: 30px; border-bottom: 2px solid #000;} .sub0201_view_wrap .view_tit p{font-size: 50px; color: #000; font-weight: 700;} .sub0201_view_wrap .con{width: 100%;} .sub0201_view_wrap .img_slide .img_wrap{position:relative; width:100%; padding-bottom:53.571%;background: #000;} .sub0201_view_wrap .img_slide .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .sub0201_view_wrap .slick-prev{position: absolute; top: 50%; transform:translateY(-50%); left: 0; background: url(/assets_2023/images/sub/sub0201_view_prev_pc.png)center no-repeat; width: 60px; height: 60px; background-size: cover;z-index: 10; text-indent: -9999px;} .sub0201_view_wrap .slick-next{position: absolute; top: 50%; transform:translateY(-50%); right: 0; background: url(/assets_2023/images/sub/sub0201_view_next_pc.png)center no-repeat; width: 60px; height: 60px; background-size: cover;z-index: 10; text-indent: -9999px;} .sub0201_view_wrap .txt_con{padding: 30px;background: #fff; border:1px solid #000;} .sub0201_view_wrap .txt_con .top{border-bottom: 2px solid #000;} .sub0201_view_wrap .txt_con .top p{font-size: 40px; color: #000; font-weight: 600;margin-bottom: 15px;} .sub0201_view_wrap .txt_con .top strong{display: flex;gap:40px;margin-bottom: 27px;} .sub0201_view_wrap .txt_con .top span{position: relative;font-size: 18px;color: #000; font-weight: 400;} .sub0201_view_wrap .txt_con .top span:not(:last-child)::after{content:'';display: block;position: absolute; top: 50%; transform:translateY(-50%); right: -20px; width: 1px; height: 14px; background: #000;} .sub0201_view_wrap .txt_con .bot{} .sub0201_view_wrap .txt_con .bot .bot_con{padding: 30px 0px;} .sub0201_view_wrap .txt_con .bot .bot_con:last-child{padding-bottom: 0; border-top: 1px solid #000;} .sub0201_view_wrap .txt_con .bot .bot_con p{font-size: 24px; color: #000; font-weight: 700;margin-bottom: 20px;} .sub0201_view_wrap .txt_con .bot .bot_con span{font-size: 16px; color: #000; font-weight: 300;line-height: 30px;word-break: keep-all;word-wrap: break-word;} /* sub0202 */ .sub0202_wrap th,td {word-break: keep-all;} .sub0202_wrap .tab_menu_wrap{display: flex;gap:94px; justify-content:center;margin-bottom: 30px;} .sub0202_wrap .tab_menu_wrap a{display: block; width: 200px; height: 45px; line-height: 40px;font-size: 16px; font-weight: 600; color: #000; text-align: center; border:2px solid #000;transition:.6s;} .sub0202_wrap .tab_menu_wrap a.on{background: #fff;} .sub0202_wrap .tab_menu_wrap a:hover{background: #fff;} .sub0202_wrap .tab-con .tb_wrap table.tbl02 {width: 100%; border: 2px solid #000; margin-bottom: 60px;} .sub0202_wrap .tab-con .tb_wrap table.tbl02:last-child {margin-bottom: 0;} .sub0202_wrap .tab-con .tb_wrap table.tbl02 th.th_tit {font-size: 40px; padding: 10px; font-weight: 700; color: #000; text-align: center; border-right: 2px solid #000; border-left: 2px solid #000;} .sub0202_wrap .tab-con .tb_wrap table.tbl02 th.th_sub {font-size: 26px; padding: 10px; font-weight: 500; color: #fff; background: #000; text-align: center; border-right: 1px solid #fff;} .sub0202_wrap .tab-con .tb_wrap table.tbl02 th.th_sub:last-child {border-right: 0;} .sub0202_wrap .tab-con .tb_wrap table.tbl02 td {padding: 10px; font-size: 18px; background: rgba(255,255,255,0.4); text-align: center; font-weight: 500; color: #000; border-bottom: 1px solid #000; border-right: 1px solid #000; } .sub0202_wrap .tab-con .tb_wrap table.tbl02 td:last-child {border-right: 0;} .sub0202_wrap .tab-con .tb_wrap table.tbl03 {width: 100%; border: 2px solid #000; margin-bottom: 0;} .sub0202_wrap .tab-con .tb_wrap table.tbl03:last-child {margin-bottom: 0;} .sub0202_wrap .tab-con .tb_wrap table.tbl03 th.th_tit {color: #fff; text-align: center; border-bottom: 1px solid #fff; border-right: 2px solid #000; border-left: 2px solid #000; background: #000;} .sub0202_wrap .tab-con .tb_wrap table.tbl03 th.th_sub {color: #fff; background: #222;} .sub0202_wrap .tab-con .tb_wrap table.tbl02 td {background: none;} .sub0202_wrap .tab-con .tb_wrap table.tbl02 td a {color:#000; font-weight: 700;} /* sub0202_view */ .sub0202_view_wrap .view_video_wrap {position: relative; width: 100%; height: 0; padding-bottom: 46%; overflow: hidden; margin-bottom: 20px;} .sub0202_view_wrap .view_video_wrap iframe {position: absolute; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; top:0; left:0; bottom:0; right:0; margin: auto;} .sub0202_view_wrap .txt_con {background: none; border: 0;} .sub0202_view_wrap .txt_con .top {border-bottom: 0; padding: 30px; border: 1px solid #000; background: #000;} .sub0202_view_wrap .txt_con .top p {color:#fff;} .sub0202_view_wrap .txt_con .top strong {margin-bottom: 0; color:#fff;} .sub0202_view_wrap .txt_con .top strong > span {color:#fff;} .sub0202_view_wrap .txt_con .bot .bot_con {padding: 30px; } .sub0202_view_wrap .txt_con .bot .bot_con:last-child {border-top:1px solid #000; border-bottom:1px solid #000; padding-bottom: 30px;} /* sub0302 */ .sub0302_wrap{line-height: 1;} .sub0302_wrap .con_wrap{gap:30px;} .sub0302_wrap .con_wrap .con{width: 100%;} .sub0302_wrap .con_wrap .con .img_wrap{padding-bottom: 28.571%;} .sub0302_wrap .con_wrap .con .txt_wrap span{display: flex;gap:40px;} .sub0302_wrap .con_wrap .con .txt_wrap span strong{position: relative;font-weight: 500;} .sub0302_wrap .con_wrap .con .txt_wrap span strong:not(:last-child)::after{content:'';display: block;position: absolute; top: 50%; transform:translateY(-50%); right: -20px; width: 1px; height: 14px; background: #000;} /* sub0302_view */ .sub0302_view_wrap .view_tit{border:none;margin-bottom: 0;} .sub0302_view_wrap .view_tit p{font-size: 24px; word-break: keep-all;} .sub0302_view_wrap .txt_con{min-height: 750px;} .sub0302_view_wrap .txt_con .top02{margin-bottom: 15px;} .sub0302_view_wrap .txt_con .top02 .tit p{font-size: 24px; color: #000; font-weight: 700;margin-bottom: 20px;} .sub0302_view_wrap .txt_con .top02 .txt{display: flex; gap:40px;align-items:center;margin-bottom: 20px;} .sub0302_view_wrap .txt_con .top02 .txt .img_box{width: 170px;} .sub0302_view_wrap .txt_con .top02 .txt .img_wrap{position:relative; width:100%; padding-bottom:100%;overflow: hidden;border-radius: 50%;} .sub0302_view_wrap .txt_con .top02 .txt .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .sub0302_view_wrap .txt_con .top02 .txt p{font-size: 16px; color: #000; font-weight: 300;} .sub0302_view_wrap .txt_con .top02 .txt02 p{font-size: 16px; color: #000; font-weight: 500; margin-bottom: 15px;} .sub0302_view_wrap .img_slide .img_wrap{background: transparent;padding-bottom: 50%;} .sub0302_view_wrap .img_con{border:1px solid #000; border-bottom: none;} /* sub0303_view */ .sub0303_view_wrap .view_tit{border:none;margin-bottom: 0;} .sub0303_view_wrap .view_tit p{font-size: 24px; } .sub0303_view_wrap .img_slide .img_wrap{padding-bottom: 50%;border: 1px solid #000;} .sub0303_view_wrap .txt_con .top p{font-size: 24px; color: #000; font-weight: 600;margin-bottom: 10px;} .sub0303_view_wrap .txt_con .top strong{font-size: 18px; color: #000; font-weight: 400;} /* sub04 */ .sub04_tab{display: none;} /* sub0401 */ .sub0401_wrap .tab_menu_wrap{display: flex;gap:94px; justify-content:center;margin-bottom: 30px;} .sub0401_wrap .tab_menu_wrap a{display: block; width: 200px; height: 45px; line-height: 40px;font-size: 16px; font-weight: 600; color: #000; text-align: center; border:2px solid #000;transition:.6s;} .sub0401_wrap .tab_menu_wrap a.on{background: #000;color: #fff;} .sub0401_wrap .tab_menu_wrap a:hover{background: #000;color: #fff;} .sub0401_wrap .con ul.li_04 {} .sub0401_wrap .con ul.li_04 li:nth-child(1) {border-top: 2px solid #000;} .sub0401_wrap .con ul.li_04 li {border-bottom: 1px solid #000; padding: 0 20px; width: 100%; height: 70px; } .sub0401_wrap .con ul.li_04 li a {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; line-height: 2.2;} .sub0401_wrap .con ul.li_04 li a p.p_tit {width: 70%; font-size: 30px; color: #000; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub0401_wrap .con ul.li_04 li a p.p_con {width: 30%; font-size: 16px; color: #000; font-weight: 600; text-align: right;} .sub0401_wrap .con .paging_wrap ul.paging04 {display: flex; gap: 40px; justify-content: center;} .sub0401_wrap .con .paging_wrap ul.paging04 li a {font-size: 17px; color: #000;} .sub0401_wrap .con .paging_wrap ul.paging04 li a.on {font-weight: 700; position: relative; display: inline-block;} .sub0401_wrap .con .paging_wrap ul.paging04 li a.on:before {position: absolute; content: ''; width: 100%; height: 2px; background: #000; top: 34px; left:0;} .sub0401_wrap .con .paging_wrap ul.paging04 li.page_arrow a {display: block;} .sub0401_wrap .con .paging_wrap ul.paging04 li.page_arrow a img {vertical-align: middle;} /* sub0402_view */ .sub0402_view_wrap .txt_con .bot .bot_con {padding-bottom: 30px; border-top: 1px solid #000;} .sub0402_view_wrap .txt_con .bot .bot_con ul.bot_li {margin: 30px 0;} .sub0402_view_wrap .txt_con .bot .bot_con ul.bot_li:last-child {margin-bottom: 0;} .sub0402_view_wrap .txt_con .bot .bot_con ul.bot_li li.bot_tit {font-size: 18px; color: #000; font-weight: 600; margin-bottom: 20px;} .sub0402_view_wrap .txt_con .bot .bot_con ul.bot_li li.bot_con2 {font-size: 16px; color: #222; font-weight: 300;line-height: 30px;word-break: keep-all; padding-left: 20px;} .sub0402_view_wrap .txt_con01 {padding: 30px; background: #fff; border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000;} .sub0402_view_wrap .txt_con01 .top01 {} .sub0402_view_wrap .txt_con01 .top01 p {font-size: 40px; color: #000; font-weight: 600; margin-bottom: 15px;} .sub0402_view_wrap .txt_con01 .top01 strong {} .sub0402_view_wrap .txt_con01 .top01 span {font-size: 18px; color: #000; font-weight: 400;} .sub0402_view_wrap .img_slide .img_wrap{background: transparent;padding-bottom: 50%;} .sub0402_view_wrap .img_con{border:1px solid #000; border-bottom: none;} /* sub0404 */ .sub0404_wrap .sub04_slide li{width: 353px; margin-right: 120px;} .sub0404_wrap .sub04_slide li .img_wrap{position:relative; width:100%; padding-bottom:141.643%;cursor:pointer;} .sub0404_wrap .sub04_slide li .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .sub0404_wrap .sub04_slide li .img_wrap .img_hover{opacity: 0;position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/assets_2023/images/sub/sub0404_icon01_pc.png)center no-repeat rgba(0,0,0,.7); background-size: 50px;transition:.4s;} .sub0404_wrap .sub04_slide li .img_wrap .img_hover:hover{opacity: 1;} .sub0404_wrap .sub04_slide .slick-prev{position: absolute; top: 50%; left: 0;transform:translateY(-50%); background: url(/assets_2023/images/sub/sub0201_view_prev_pc.png)center no-repeat; width: 60px; height: 60px; background-size: cover;z-index: 100; text-indent: -9999px;} .sub0404_wrap .sub04_slide .slick-next{position: absolute; top: 50%; right: 0;transform:translateY(-50%); background: url(/assets_2023/images/sub/sub0201_view_next_pc.png)center no-repeat; width: 60px; height: 60px; background-size: cover;z-index: 100; text-indent: -9999px;} .sub0404_wrap .progress { position:relative; width:calc(100%); height:2px; background:#e5e5e5;top: 60px;} .sub0404_wrap .progress .slider__label { position:absolute; left:0; top:50%; transform:translateY(-50%); width:0; height:100%; background:#000; transition:0.5s;} .sub0404_pop{display: none;position: absolute; top: 0; left: 0; z-index: 9999;background: rgba(0,0,0,.9); width: 100%; height: 100%;padding-top: 175px;} .sub0404_pop .sub_inner{margin: 0 auto;} .sub0404_pop .pop_x{position: absolute; top: 95px; right: 260px; display: block; background: url(/assets_2023/images/sub/sub0404_icon02_pc.png)center no-repeat;width: 32px; height: 32px;} .sub0404_pop .pop_big_slide{margin-bottom: 100px;} .sub0404_pop .pop_big_slide .txt_wrap{text-align: center; padding-bottom: 65px;} .sub0404_pop .pop_big_slide .txt_wrap p{font-size: 40px; color: #fff;font-weight: 700;} .sub0404_pop .pop_big_slide .img_wrap{position:relative; width:100%; padding-bottom:47.143%;} .sub0404_pop .pop_big_slide .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .sub0404_pop .pop_big_slide .slick-prev{position: absolute; top: 60%; left: 0;transform:translateY(-50%); background: url(/assets_2023/images/sub/sub0201_view_prev_pc.png)center no-repeat #fff; width: 60px; height: 60px; background-size: cover;z-index: 100; text-indent: -9999px;} .sub0404_pop .pop_big_slide .slick-next{position: absolute; top: 60%; right: 0;transform:translateY(-50%); background: url(/assets_2023/images/sub/sub0201_view_next_pc.png)center no-repeat #fff; width: 60px; height: 60px; background-size: cover;z-index: 100; text-indent: -9999px;} .sub0404_pop .pop_sm_slide .slick-list{width: calc(100% + 20px);} .sub0404_pop .pop_sm_slide li{margin-right: 20px;} .sub0404_pop .pop_sm_slide .img_wrap{position:relative; width:100%; padding-bottom:70.588%;transition:.2s;} .sub0404_pop .pop_sm_slide .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;} .sub0404_pop .pop_sm_slide .slick-current .img_wrap{border: 4px solid #fff;} /* sub0405 */ .sub0405_wrap .tab_menu_wrap{display: flex;gap:94px; justify-content:center;margin-bottom: 30px;} .sub0405_wrap .tab_menu_wrap a{display: block; width: 200px; height: 45px; line-height: 40px;font-size: 16px; font-weight: 600; color: #000; text-align: center; border:2px solid #000;transition:.6s;} .sub0405_wrap .tab_menu_wrap a.on{background: #000;color: #fff;} .sub0405_wrap .tab_menu_wrap a:hover{background: #000;color: #fff;}