body {width:100%; min-height:100vh; overflow:auto; background:#402478;}
.btns {display: flex; gap: 0 10px; align-items: center;}
.btn-logout {position: absolute; right: 40px; top: 30px; z-index: 9999;}
.btn-logout a {display: flex; align-items: center; gap: 0 10px; justify-content: center; width: 140px; height: 50px; border-radius: 7px; background-color: #2A115C; color: #fff; font-size: 18px; font-weight: 500;}
.btn-logout a.report {background-color: #3a3c9c;}
.btn-logout a img {height: 20px; width: auto;}
.roBox {background:url(/assets/img/main/bg.jpg) no-repeat; padding:50px 100px; width:100%; height:100%; background-size:cover; position:relative; display: flex; align-items: center;}
.roBox .roCon { width:100%; /*height:100%;*/ display:flex; justify-content:space-between;}
.roBox .bgImgBox {position:absolute; bottom:0; width:100%; height:100%; left:0;}
.roBox .bgImgBox img {position:absolute; bottom:20px; left:80px; width:530px;}
.roBox .roCon .right {width:50%; position:relative; z-index:1; display: flex; align-items: center;}
.roBox .roCon .right .iBox.iBox2 {display:flex; flex-direction:column; gap:20px; padding-top:20px;}
.roBox .roCon .right .iBox.iBox2 .ib1 {position:relative;}
.roBox .roCon .right .iBox.iBox2 .ib1 img:first-of-type {} 
.roBox .roCon .right .iBox.iBox2 .ib1 img:last-of-type {position:absolute; bottom:-20px; right:-100px;} 
.roBox .roCon .right .iBox.iBox2 .ib1 h4 {position:absolute; bottom:110px; right:-100px;}
.roBox .roCon .right .iBox.iBox2 .ib2 {position:relative;} 
.roBox .roCon .right .iBox.iBox2 .ib2 img:first-of-type {} 
.roBox .roCon .right .iBox.iBox2 .ib2 img:last-of-type {position:absolute; bottom:-50px; left:-110px; transform: scaleX(-1);} 
.roBox .roCon .right .iBox.iBox2 .ib2 h4 {position:absolute; bottom:70px; left:-120px; color:#ffbe6e;} 
.roBox .roCon .right .iBox.iBox3 {display:flex; justify-content:space-between; gap:40px;}
.roBox .roCon .right .iBox.iBox3 div span {font-size:25px; font-family:'Pretendard-Bold'; padding-bottom:20px;}
.roBox .roCon .right .iBox.iBox4 {padding-top:50px;}
.roBox .roCon .left {width:45%; position:relative; z-index:1;}
.roBox .roCon .left .top span {padding:10px; width:140px; border-radius:50px; background:#000; color:#fff; font-family: 'Pretendard-Regular'; letter-spacing:0; display:flex; align-items:center; justify-content:center;}	
.roBox .roCon .left .center {padding-top:40px;}
.roBox .roCon .left .center h1 {font-family: 'Pretendard-SemiBold'; color:#fff; font-size:40px; line-height:1.4;}
.roBox .roCon .left .center h1 b {color:#d981ff;font-family: 'Pretendard-Bold';}
.roBox .roCon .bottom {padding-top:40px; display:flex; align-items:center; gap:20px;}
.roBox .roCon .bottom a {padding:10px; width:120px; height:50px; border:1px solid #fff; font-size:18px; border-radius:4px;display:flex; justify-content:center; align-items:center; color:#fff;}
.roBox .roCon .bottom a:hover {background:#fff; color:#000; transition:0.3s; font-family:'Pretendard-Bold';}
.roBox .roCon .bottom span {color:#fff; font-size:20px;}
.roBox .roCon .bottom .searchWrap {display:flex;}
.roBox .roCon .bottom .searchWrap input {width:300px; height:50px; border:none; background:#fff; color:#000; padding:10px  20px; border-radius:4px 0 0 4px;}
.roBox .roCon .bottom .searchWrap button {background:#8D5EEA; color:#fff; height:50px; width:80px; padding:10px; display:flex; justify-content:center; align-items:center; border-radius:0 4px 4px 0;}
.roBox .roCon .bottom .searchWrap input:focus {border: 1px solid transparent;outline: none;}
.roBox .roCon .bottom .searchWrap button:hover {background:#5a40cb; transition:0.3s;}
.intro-slider {padding:0;width:100%;position: relative;}
.intro-slider .slick-dots {width: 100%;text-align: center; padding-top: 20px;}
.intro-slider .slick-dots li {display: inline-block;margin: 0 5px;}
.intro-slider .slick-dots li button {font-size: 0;line-height: 0;display: block;width: 8px;height: 8px;padding: 2px;cursor: pointer;border: none;outline: none;background: transparent; border:1px solid #fff; border-radius: 50%;}
.intro-slider .slick-prev {position: absolute;top: 300px;left:0;transform: translateY(-50%);border: none;color: #fff;width: 40px;height: 40px;border-radius: 8px;z-index: 1000;cursor: pointer; background:url(/assets/img/main/fo_arrow1.png) no-repeat 50%;text-indent:-9999px;}
.intro-slider .slick-next {position: absolute;top: 300px;right:0;transform: translateY(-50%);background:url(/assets/img/main/fo_arrow2.png) no-repeat 50%; text-indent:-9999px;border: none;color: #fff;width: 40px;height: 40px;border-radius:8px;z-index: 1000;cursor: pointer;}
.intro-slider .slick-dots li.slick-active button {background: #fff;}
.intro-wrapper .box {width:100%; display:flex; align-items:center; justify-content:center; gap:50px; flex-direction:column;}
.intro-wrapper .box.box2 {gap:20px;}
.intro-wrapper .box h4 {text-align:center; color:#fff; font-size:25px; font-family:'Pretendard-SemiBold';}
.intro-wrapper .box span {text-align:center; color:#fff; display:flex; padding-top:20px; font-size:17px; font-family:'Pretendard-Light';line-height:1.3; width:100%; align-items:center; justify-content:center;}
.roBox .roCon .right .iBox.iBox3 .mbImg {display:none;}
@media (max-width:1600px) {
    body {height: auto;}	
}
@media (max-width:1600px) {
    .roBox .roCon .right .iBox.iBox1 {display:flex; justify-content:center; align-items:center;}
    .roBox .roCon .right .iBox.iBox1 img {width:320px;}
    .roBox .roCon .right .iBox.iBox4 img {width:400px;}
    .intro-slider .slick-dots {bottom:0;}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:first-of-type {width:250px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 img:first-of-type {width:250px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 span {top:38px; right:2px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 span {bottom:-5px; right:6px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 h4 {font-size:20px; right:-90px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 h4 {font-size:20px; left:-90px;}
    .intro-wrapper .box.box2 {gap:50px;}
    .roBox .bgImgBox img {width:500px;}
    .roBox .roCon .right {padding-top:0;}
}
@media (max-width:1500px) {
    .roBox .roCon .right .iBox.iBox3 img {width:200px;}
    .roBox .roCon .right .iBox.iBox3 div span {font-size:22px;}
    .roBox .bgImgBox img {width:450px;}
    .roBox  {padding:50px;}
    .intro-slider .slick-dots {bottom:-30px;}
    .roBox .roCon .bottom {gap:10px;}
}

@media (max-width:1199px) {
    .btn-logout a {width: auto; height: auto; padding: 13px 24px;}
    .roBox .roCon .left .center h1 {font-size:35px;}
    .roBox .roCon .bottom .searchWrap input {width:220px; height:40px; font-size:16px;}
    .intro-slider .slick-prev {top:250px; background-size:20px;}
    .intro-slider .slick-next {top:250px; background-size:20px;}
    .roBox .roCon .bottom a {padding:6px 16px; width:auto; height:40px; font-size:16px;}
    .roBox .roCon .bottom {gap:10px;}
    .roBox .roCon .bottom .searchWrap button {width:60px; height:40px; font-size:16px;}
    .roBox .roCon .right .iBox.iBox4 img {width:300px;}
    .roBox .roCon .right .iBox.iBox3 img {width:170px;}
    .roBox .roCon .right .iBox.iBox3 {gap:10px;}
}
@media (max-width:1099px) {
    .roBox .roCon .left .center h1 {font-size:30px;}
    .roBox .bgImgBox img {left:50px; width:400px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:last-of-type {right:-73px; width:90px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 img:last-of-type {width:90px; left:-73px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 h4 {right:-80px; bottom: 80px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 h4 {bottom:35px;}
}
@media (max-width:991px) {
    .btn-logout a {background: none;}
    .roBox .roCon .left .center h1 {font-size:26px;}
    .roBox {padding:40px;}
    .roBox .roCon .right {width:60%;}
    .roBox .roCon .left {width:35%;}
    .intro-wrapper .box {gap:30px;}
    .roBox .roCon .bottom {flex-direction:column; align-items:flex-start;}
    .roBox .roCon .left .center {padding-top:20px;}
    .roBox .roCon .bottom a {width:100%;}
    .roBox .roCon .bottom span {display:none;}
    .roBox .roCon .bottom .searchWrap {width:100%;}
    .roBox .roCon .bottom .searchWrap input {width:100%;}
    .intro-wrapper .box.box2 {gap:30px;}
}
@media (max-width:880px) {
    .roBox .roCon .bottom a {width:100%;}
    .roBox .roCon .left {width:50%;}
    .roBox .roCon .bottom .searchWrap {width:100%;}
    .roBox .roCon .bottom .searchWrap input {width:calc(100% - 70px);}
    .roBox .roCon .bottom .searchWrap button {width:70px;}
    .intro-wrapper .box h4 {font-size:20px;}
    .roBox {height:100%;}
    .intro-slider {padding:100px 0;}
    .intro-slider .slick-prev {top:110px;}
    .intro-slider .slick-next {top:110px;}
    .roBox .roCon .left .center h1 {font-size:28px;}
    .roBox .roCon .bottom span {display:none;}
    .roBox .roCon .bottom {padding-top:100px;flex-direction:column;}
    .intro-slider {padding:40px 0;}
    .roBox .bgImgBox img {left:20px; width:340px;}
    .intro-slider .slick-prev {top:160px;}
    .intro-slider .slick-next {top:160px;}
    .roBox .roCon .right .iBox.iBox3 .mbImg {display:flex;}
    .roBox .roCon .right .iBox.iBox3 .pcImg {display:none;}
    .roBox .roCon .right .iBox.iBox3 div span {padding-bottom:10px; padding-top:0; font-size:18px;}
    .roBox .roCon .right .iBox.iBox3 {flex-direction:column; gap:20px;}
    .roBox .roCon .right .iBox.iBox3 img {width:200px;}
    .roBox .roCon .right .iBox.iBox1 img {width:300px;}
}
@media (max-width:768px) {
    .btn-logout {right: 20px; top: 20px;}
    .btn-logout a {font-size: 16px; padding: 10px 20px;}
    .btn-logout a img {height: 18px;}
    .roBox .roCon {flex-direction:column;}
    .roBox .roCon .left {width:100%; z-index:7;}
    .roBox .roCon .right {width:100%;}
    .roBox .bgImgBox {display:flex; top:50px; bottom:auto; z-index:9999; right:20px; left:auto;}
    .roBox .bgImgBox img:first-of-type {width:300px;}
    .roBox .roCon .left .top {padding-top:0;}
    .roBox .bgImgBox img:last-of-type {top:-30px; left:auto; right:10px; width:280px;}
    .roBox .roCon .bottom {flex-direction:row; align-items:center;}
    .roBox .roCon .bottom span {display:flex;}
    .roBox .roCon .bottom a {width:200px;}
    .intro-slider {padding:70px 0;}
    .roBox .roCon .right {z-index:9999;}
    .roBox .bgImgBox {z-index:5;}
    .roBox .roCon .right .iBox.iBox3 {flex-direction:row; gap:20px;}
    .roBox .roCon .right .iBox.iBox3 .mbImg {display:none; border-radius:20px;}
    .roBox .roCon .right .iBox.iBox3 .pcImg {display:flex;}
    .roBox .roCon .right .iBox.iBox3 img {width:230px;}
    .roBox .roCon .right .iBox.iBox1 img {width:300px; height:auto;}
    body{height:100%;}
}
@media (max-width:680px) {
    .roBox .roCon .left .center h1 {font-size:24px;}
    .intro-slider {padding:50px 0 0;}
    .roBox .bgImgBox img:first-of-type {width:250px;}
    .roBox .bgImgBox img:last-of-type {width:230px; top:-10px;}
    .roBox .roCon .right .iBox.iBox3 img {width:200px;}
}
@media (max-width:600px) {
    .roBox .roCon .left .top span {width:120px; font-size:14px;}
    .roBox .bgImgBox img:first-of-type {width:200px;}
    .roBox .bgImgBox img:last-of-type {width:180px; top:-10px;}
    .roBox .roCon .left .center h1 {font-size:25px;}
    .roBox .roCon .bottom {padding-top:50px;}
    .roBox .roCon .right .iBox.iBox3 {flex-direction:column; gap:20px;}
    .roBox .roCon .right .iBox.iBox3 .mbImg {display:flex; width:250px;}
    .roBox .roCon .right .iBox.iBox3 .pcImg {display:none;}
}
@media (max-width:540px) {
    .roBox .roCon .bottom a {width:110px;}	
    .roBox .roCon .left .center h1 {font-size:22px;}
    .roBox .roCon .bottom {padding-top:60px;}
    .intro-wrapper .box h4 {font-size:20px;}
    .intro-wrapper .box span {font-size:16px;}
    .roBox {padding:30px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:first-of-type {width:220px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 img:first-of-type {width:220px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 span {top: 35px;right: 4px;width: 40px;height: 40px;border-radius: 10px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 span {bottom: -3px;right: 8px;width: 40px;height: 40px;border-radius: 10px}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:last-of-type {width:80px; right:-70px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 h4 {font-size:18px; right:-70px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 h4 {font-size:18px; left:-80px;}
    .roBox .roCon .bottom a {font-size:15px; width:100px; height:35px; padding:0;}
    .roBox .roCon .bottom .searchWrap input {height:35px;}
    .roBox .roCon .bottom .searchWrap button {height:35px; font-size:15px;}
    .roBox .roCon .bottom .searchWrap input {padding:10px; font-size:14px;}
    .roBox .roCon .right .iBox.iBox4 img {width:250px;}
}
@media (max-width:500px) {
    .roBox .roCon .left .center h1 {font-size:20px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:last-of-type {bottom: 10px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 img:last-of-type {bottom: -20px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 h4 {bottom: 60px;}
}
@media (max-width:480px) {
    .roBox {padding:30px 20px 20px;}
    .roBox .bgImgBox img:last-of-type {width:40px; right:30px;}
    .roBox .bgImgBox img:first-of-type {width:150px;}
    .roBox .bgImgBox {right:0;}
    .roBox .roCon .bottom {padding-top:40px;}
    .roBox .roCon .bottom a {font-size:15px;}
    .roBox .roCon .bottom .searchWrap input {font-size:15px;}
    .roBox .roCon .bottom .searchWrap button {font-size:15px;}
    .roBox .roCon .left .center {padding-top:30px;}
    .roBox .roCon .left .center h1 {font-size:20px;}
    .roBox .roCon .right .iBox.iBox1 img {width:250px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:first-of-type {width:180px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 img:first-of-type {width:180px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 span {top:28px; right:3px; width:35px; height:35px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 span {width:35px; height:35px; bottom:-4px; right:6px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:last-of-type {width:80px; right:-65px; bottom:-10px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 h4 {right:-66px;}
    .intro-slider {padding:50px 0;}
}
@media (max-width:430px) {
    .roBox .roCon .left .center h1 {font-size:19px;}
}
@media (max-width:420px) {
    .btn-logout {top: 30px;}
    .btn-logout a {background: none; padding: 10px 0;}
    .btn-logout a img {height: 15px;} 
    .roBox .roCon .left .center h1 {font-size:22px;}
    .roBox .bgImgBox img:first-of-type {width:300px; top:250px; left:50%; right:auto; transform:translate(-50%, -50%)}
    .roBox .roCon .bottom {padding-top:310px; gap:5px; flex-direction:column;}
    .roBox .roCon .bottom a {width:100%; height:40px;}
    .roBox .roCon .bottom {flex-direction:column; gap:8px;}
    .roBox .roCon .bottom .searchWrap input {height:40px;}
    .roBox .roCon .bottom .searchWrap button {height:40px;}
    .roBox .roCon .bottom span {display:none;}
    .roBox .roCon .right .iBox.iBox4 img {width:220px;}
    .roBox .roCon .right .iBox.iBox3 .mbImg {width:220px;}
}
@media (max-width:380px) {
    .roBox .roCon .right .iBox.iBox2 .ib1 h4 {right:auto; left:110px; bottom:10px;}
    .roBox .roCon .right .iBox.iBox2 .ib1 img:last-of-type {width:50px; bottom:10px; right:-35px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 h4 {right:auto; left:20px; bottom:10px;}
    .intro-slider .slick-prev {background-size:14px; top:180px; left:-10px;}
    .intro-slider .slick-next {background-size:14px; top:180px; right:-10px;}
    .roBox .roCon .right .iBox.iBox2 .ib2 img:last-of-type {width:60px; left:-43px; bottom:0;}

}
@media (max-width:360px) {
    .roBox .roCon .right .iBox.iBox1 img {width:210px;}
    .roBox .roCon .right .iBox.iBox4 img {width:200px;}
}