/* fixedmenu */
.fixedMenu {position:absolute; top:480px; z-index:99;}
.fixedMenu.fixedMenuLeft{left: 50%; right: unset; margin-left: -780px;}
.fixedMenu.fixedMenuRight{right:50%; left: unset; margin-right: -780px;}
.fixedMenu.fixedMenuLeft .fixedMenu-box.fixed {position:fixed; top:0; left: 50%; margin-left: -780px;}
.fixedMenu.fixedMenuRight .fixedMenu-box.fixed{position:fixed; top: 0; right:50%; margin-right: -780px;}
.fixedMenu .fixedMenu-box {padding-top: 20px;}
.fixedMenu .fixedMenu-box ul li .inner .txt{color: #111; font-size: 16px; font-weight: 600; line-height: 1.2em; letter-spacing: -0.01em;}
.fixedMenuRight .rightBanr li{width: 100px; text-align: center;}
.fixedMenuRight .rightBanr li a{display: block; border: 1px solid #d2d2d2; border-radius: 8px; overflow: hidden;}
.fixedMenuRight .rightBanr li .inner{padding: 20px 0 15px; background-color: #fff;}
.fixedMenuRight .rightBanr li .inner img {display:block; margin:0 auto 5px;}
.fixedMenuRight .rightBanr li .btm{color: #fff; font-size: 13px; text-align: center; background-color: #000; padding: 6px 0;}
.fixedMenuLeft .leftBanr li{text-align: center; margin-bottom: 5px;}
.fixedMenuLeft .leftBanr li a{display: block; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 8px;}
.fixedMenuLeft .leftBanr li .inner{padding: 8px; }
.fixedMenuLeft .leftBanr li .inner .txt{margin-top: 5px;}
.fixedMenuLeft .leftBanr li .inner .sub{color: #666; font-size: 12px; margin-top: 5px;}
.fixedMenuLeft .leftBanr li .inner .sub svg{width: 10px; height: 10px; fill: none; stroke-width: 0.5px; stroke: #666; vertical-align: middle;}

	.main_cnt_01{background: #f8f5f0 url('/images/main/bg_main_cnt_01.jpg')no-repeat center top;}
	.main_cnt_02{background-color: #2b272f; padding: 100px 0px}
	.main_cnt_02 .m_title{color: #fff; font-weight: bold; font-size: 32px; text-align: center;}
	.main_cnt_02 .GuideWrap{border-radius: 20px; background-color: #186fff; position: relative;}
	.main_cnt_02 .GuideWrap .deco{position: absolute; right: 40px; top: 50px;}
	.main_cnt_02 .GuideWrap .btn_guide{position: absolute; left: 40px; top: 137px; width: 342px; height: 50px; border-radius: 100px; overflow: hidden; text-indent: -99em;}
	.main_cnt_02 .CounselingWrap{border-radius: 20px; background-color: #2b272f; border: 1px solid #5f5a59; position: relative;}
	.main_cnt_02 .CounselingWrap .tel_link{position: absolute; left: 40px; top: 68px; font-size: 28px; font-weight: bold; color: #fff;}
	.main_cnt_02 .CounselingWrap .btn_kakao{position: absolute; left: 34px; top: 133px; width: 232px; height: 50px; border-radius: 100px; overflow: hidden; text-indent: -99em;}


/* ----- main-banner -----  */
#itbankSection .main-banner {max-width:100%; overflow:hidden; position:relative;}
#itbankSection .main-banner ul {list-style:none; padding:0;}
    /* main-banner swiper */
    .main-banner .swiper-mainbanner-container{height:424px;}
    .main-banner .swiper-slide a{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform:translateX(-50%);}
    .main-banner .swiper-slide a img{display: block; width: 100%; height: 100%; object-fit: cover;}
    /* main-banner cover */
    .main-banner .cover-wrap{display:flex; position:absolute; left:0; top:0; width:100%; height:100%; padding-top: 45px;}
    .main-banner .cover-wrap .tag{display:inline-block; color:var(--tagcolor); padding:4px 15px; font-weight:500; font-size:16px; margin-bottom:20px; border:1px solid var(--tagcolor); border-radius:16px;}
    .main-banner .cover-wrap .txtbox{color:var(--titcolor);}
    .main-banner .cover-wrap .txtbox .subtit{color: inherit; font-size:28px; line-height:100%; margin-bottom:10px; opacity: 65%;}
    .main-banner .cover-wrap .txtbox h4{color: inherit; font-size:48px; font-weight:700; line-height:1.2em; height: 116px;}
    .main-banner .cover-wrap .infobox{display:flex; width:640px; margin-top:20px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.3); border-radius: 16px;}
    .main-banner .cover-wrap .infobox .lft{background-color:#fff; flex-grow:1; padding:15px 0 15px 30px; border-top-left-radius: 16px; border-bottom-left-radius: 16px;}
    .main-banner .cover-wrap .infobox .lft dl{display:flex; margin:5px 0;}
    .main-banner .cover-wrap .infobox .lft dl dt{
        position: relative;  width:90px; padding-left: 18px;
        color:#111; font-size:18px; font-weight:700;
    }
    .main-banner .cover-wrap .infobox .lft dl dt::before{
        display: block; position: absolute; top: 8px; left: 0;
        width: 12px; height: 12px;
        background: url('/images/main/icon/2024/icon_bull.png') no-repeat;
        content: '';
    }
    .main-banner .cover-wrap .infobox .lft dl dd{color:#555; font-size:18px;}
    .main-banner .cover-wrap .infobox .rgt{
        display:flex; align-items:center; position:relative; width:200px; padding-left: 40px; flex-shrink:0;
        background-color:#000; background: #000 linear-gradient(160deg, rgba(51,51,51,1) 20%, rgba(0,0,0,1) 90%);
        border-top-right-radius: 16px; border-bottom-right-radius: 16px; 
    }
    .main-banner .cover-wrap .infobox .rgt .sub{color: #c8c8c8; font-size: 16px; font-weight: 500;}
    .main-banner .cover-wrap .infobox .rgt .tit{display: inline-block; color: #fff; font-size: 20px; font-weight: 700; position: relative;}
    .main-banner .cover-wrap .infobox .rgt .tit::after{display: block; position: absolute; top: 7px; right: -8px; width: 4px; height: 4px; background-color:#52eb6c; border-radius: 50%; content: '';}
    .main-banner .cover-wrap .infobox .rgt .dday{position: absolute; top: -5px; left: 40px; padding:2px 6px 0; color: #fff; font-weight: 700; letter-spacing: 0.05em; font-size: 13px; line-height: 1.4em; background-color: #dc3232; border-radius: 2px;}

    /* main-banner swiper-act */
    .main-banner .swiper-act{display: flex; align-items: center; position: absolute; right:calc((100% - 1280px)/2); bottom: 60px; background-color:rgba(0,0,0,.4); padding:6px 12px; border-radius:15px; z-index:1;}
    .main-banner .navi .ico{width: 18px; height: 18px; stroke:#fff; stroke-width: 1px; fill:none;}
    .main-banner .swiper-pagination-fraction {display:inline-block; position: unset; width:auto; color:#fff; font-size:12px;}
    .main-banner .swiper-pagination-fraction span {display:inline-block; width:18px; color:#fff; font-size:14px; text-align: center;}
    .main-banner .swiper-pagination-fraction span.swiper-pagination-total {position:relative;}
    .main-banner .swiper-controls {margin-left: 5px;}
    .main-banner .swiper-controls a.controls-play {background:url('/images/main/icon/2024/ico_mainbanner_play.png') no-repeat left top; width:16px; height:16px;}
    .main-banner .swiper-controls a.controls-stop {display:block; background:url('/images/main/icon/2024/ico_mainbanner_stop.png') no-repeat left top; width:16px; height:16px;}



/* ----- main-learning ----- */
#itbankSection .main-learning{position: fixed; bottom: 0;z-index: 9; width: 100%; height: 100px; background: url('/images/main/bg_fix_Counseling.jpg')no-repeat center top;}
#itbankSection .main-learning > div.container {display: flex; justify-content: space-between;}
#itbankSection .main-learning .box {display:inline-block;}
#itbankSection .main-learning .box01 {z-index:2; text-align:left; }
#itbankSection .main-learning .box01 .inner-wrap{width: 1280px;}
#itbankSection .main-learning .box01 form fieldset{display: flex; align-items: center; height: 100px;}
#itbankSection .main-learning .box01 form .group {font-size:0;}
#itbankSection .main-learning .box01 form .group label {display:inline-block; font-size:18px; font-weight:700; height:50px; line-height:50px; margin-right: 24px;}
#itbankSection .main-learning .box01 form .group input[type=text]{height:50px; font-size:18px; color:#000; padding:0 8px; border:none; background:none; background-color: #fff;margin-right: 24px;}
#itbankSection .main-learning .box01 form .group select {height:50px; font-size:18px; color:#000; padding:0 8px;margin-right: 24px;}
#itbankSection .main-learning .box01 form .group select[value=""] {color:#d2d2d2;}
#itbankSection .main-learning .box01 form .group input[type=text]::placeholder {color:#d2d2d2;}
#itbankSection .main-learning .box01 form .group textarea {display:inline-block; border-bottom:1px solid; width:calc(100% - 84px); height:50px; padding:8px 8px 0;}
#itbankSection .main-learning .box01 form .check-box {margin:10px 0;}
#itbankSection .main-learning .box01 form .group button , 
#itbankSection .main-learning .box01 form .group a {display:block; text-align:center; width:100%; font-size:18px; height:50px; line-height:50px; border-radius:8px; position:relative; top:3px;}
#itbankSection .main-learning .box01 form .btn_policy{display: block; text-decoration: underline; margin-left: 30px;}


/* ----- main-benefit ----- */
#itbankSection .main-benefit{padding: 70px 0; background-color: #edf2f0;}
#itbankSection .main-benefit .container{display: flex; justify-content: space-between; align-items: center;}
#itbankSection .main-benefit .lft .tabbox a{
    display: inline-block; color: #666; font-size: 18px; font-weight: 300; border-radius: 23.5px; padding: 10px 30px; border: 1px solid #d2d2d2;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
#itbankSection .main-benefit .lft .tabbox a:hover,
#itbankSection .main-benefit .lft .tabbox a.act{font-weight: 700; color: #fff; background-color: #111; border-color: #111;}
#itbankSection .main-benefit .lft .tit{font-size: 28px; font-weight: 500; margin: 25px 0 15px;}
#itbankSection .main-benefit .lft .sub{color: var(--color1); font-size: 16px; font-weight: 500;}
#itbankSection .main-benefit .lft .sub svg{fill: none; stroke: var(--color1); stroke-width: 1px; width: 15px; height: 15px; margin-top: 2px;}
#itbankSection .main-benefit .rgt .tab ul{display: flex;}
#itbankSection .main-benefit .rgt .tab ul li{color: #555; text-align: center; font-size: 18px; margin-left: 35px; opacity: 0; animation: showup 0.5s both;}
@keyframes showup {
    0%{opacity: 0; transform: translateY(50px);}
    100%{opacity: 1; transform: translateY(0);}
}
#itbankSection .main-benefit .rgt .tab ul li:nth-child(2){animation-delay: 0.1s;}
#itbankSection .main-benefit .rgt .tab ul li:nth-child(3){animation-delay: 0.2s;}
#itbankSection .main-benefit .rgt .tab ul li:nth-child(4){animation-delay: 0.3s;}
#itbankSection .main-benefit .rgt .tab ul li:nth-child(5){animation-delay: 0.4s;}
#itbankSection .main-benefit .rgt .tab ul li:nth-child(6){animation-delay: 0.5s;}
#itbankSection .main-benefit .rgt .tab ul li a{display: block; width: 100%;}
#itbankSection .main-benefit .rgt .tab ul li a::before{
    display: block; width: 110px; height: 110px; margin-bottom: 10px; transition: transform 0.3s;
    background-image: url('/images/main/icon/2024/icon_benefits.png'); background-repeat: no-repeat; content: '';
}
#itbankSection .main-benefit .rgt .tab01 ul li:nth-child(1) a::before{background-position: 0 0;}
#itbankSection .main-benefit .rgt .tab01 ul li:nth-child(2) a::before{background-position: calc(-110px * 1) 0;}
#itbankSection .main-benefit .rgt .tab01 ul li:nth-child(3) a::before{background-position: calc(-110px * 2) 0;}
#itbankSection .main-benefit .rgt .tab01 ul li:nth-child(4) a::before{background-position: calc(-110px * 3) 0;}
#itbankSection .main-benefit .rgt .tab01 ul li:nth-child(5) a::before{background-position: calc(-110px * 4) 0;}
#itbankSection .main-benefit .rgt .tab01 ul li:nth-child(6) a::before{background-position: calc(-110px * 5) 0;}
#itbankSection .main-benefit .rgt .tab02 ul li:nth-child(1) a::before{background-position: 0 -110px;}
#itbankSection .main-benefit .rgt .tab02 ul li:nth-child(2) a::before{background-position: calc(-110px * 1) -110px;}
#itbankSection .main-benefit .rgt .tab02 ul li:nth-child(3) a::before{background-position: calc(-110px * 2) -110px;}
#itbankSection .main-benefit .rgt .tab02 ul li:nth-child(4) a::before{background-position: calc(-110px * 3) -110px;}
#itbankSection .main-benefit .rgt .tab02 ul li:nth-child(5) a::before{background-position: calc(-110px * 4) -110px;}
#itbankSection .main-benefit .rgt .tab02 ul li:nth-child(6) a::before{background-position: calc(-110px * 5) -110px;}
#itbankSection .main-benefit .rgt .tab ul li:hover a::before{transform:translateY(-10px)}



/* ----- main-board ----- */
#itbankSection .main-board {padding-top: 70px;}
#itbankSection .main-board .container{display: flex; justify-content: space-between;}
#itbankSection .main-board .board-wrap{position: relative; width: 620px;}
#itbankSection .main-board .board-wrap .titbox{display: flex;}
#itbankSection .main-board .board-wrap .titbox h4{position: relative; padding: 0 10px;}
#itbankSection .main-board .board-wrap .titbox h4::before{display: block; position: absolute; top: 6px; left: 0; width: 1px; height: 20px; background-color: #c8c8c8; content: '';}
#itbankSection .main-board .board-wrap .titbox h4:first-child{padding-left: 0;}
#itbankSection .main-board .board-wrap .titbox h4:first-child::before{display: none;}
#itbankSection .main-board .board-wrap .titbox h4:not(.act){font-weight: 300; color: #555;}
#itbankSection .main-board .board-wrap .titbox h4 button{font-size:inherit; color:inherit; font-weight: inherit;}
#itbankSection .main-board .box {height: 240px; padding: 30px 40px; border-radius: 16px; border: 1px solid #d2d2d2;}
#itbankSection .main-board .box ul li a {display: block; padding: 8px 0;}
#itbankSection .main-board .box ul li a::after{display: block; content: ''; clear: both;}
#itbankSection .main-board .box ul li span{display: inline-block; font-size: 16px; font-weight: 300;}
#itbankSection .main-board .box ul li .txt {max-width: 80%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#333; font-size:16px; line-height: 1.2em; transition: color 0.3s, font-weight 0.3s;}
#itbankSection .main-board .box ul li .date {color: #666; font-size: 14px; float: right;}
#itbankSection .main-board .box ul li a:hover .txt{color: var(--color1); font-weight: 700; border-bottom: 1px solid var(--color1);}
#itbankSection .main-board .box .a-more {position:absolute; right:0; top:10px; font-size: 16px; padding-right: 20px;}
#itbankSection .main-board .box .a-more::before {width:2px; height:10px; top: 5px; right: 5px; display: block; position:absolute; background-color: #000; content: ''; transition: transform 0.3s;}
#itbankSection .main-board .box .a-more::after {width:10px; height:2px; top: 9px; right: 1px; display: block; position:absolute; background-color: #000; content: ''; transition: transform 0.3s;}
#itbankSection .main-board .box .a-more:hover::before,
#itbankSection .main-board .box .a-more:hover::after{transform: rotate(180deg);}



/* ----- main-interview ----- */
#itbankSection .main-interview {padding:80px 0; text-align:center; position:relative;}
#itbankSection .main-interview .swiper-container{padding-top: 25px; margin-top: -25px;}
#itbankSection .main-interview .swiper-slide{background:url('/images/main/interview/bg_interview.png') 100% center no-repeat; border-radius: 16px;}
#itbankSection .main-interview .swiper-slide a{display: block; padding: 40px 45px; }
#itbankSection .main-interview .swiper-slide .txt{color:#fff; font-size: 26px; text-align: left;}
#itbankSection .main-interview .swiper-slide .info{display: flex; margin-top: 25px;}
#itbankSection .main-interview .swiper-slide .info .period{color:#c4e7d6; font-size: 14px; padding: 2px 10px; margin-right: 10px; border: 1px solid #c4e7d6; border-radius: 4px;}
#itbankSection .main-interview .swiper-slide .info .name{
    position: relative; color:#fff; font-size: 18px; font-weight: 700; margin-right: 15px; padding-right: 20px;
    background: url('/images/main/icon/2024/icon_star.png') 100% 3px no-repeat;
}
#itbankSection .main-interview .swiper-slide .info .sub{color: #c4e7d6; font-size: 18px; font-weight: 300;}
#itbankSection .main-interview .swiper-slide .frame{position: absolute; right: 90px; top: -25px; border-radius: 50%; box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 15%); z-index: 1;}
    /* main-interview swiper-act */
    .main-interview .swiper-act{display: flex; align-items: center; position: absolute; right: 40px; bottom: 40px; z-index: 2;}
    .main-interview .swiper-act .navi{position: unset; background: none; width: 30px; height: 30px; padding: 5px; margin: 0;}
    .main-interview .swiper-act .navi .ico{width: 100%; height: 100%; stroke:#888; stroke-width: 1px; fill:none; transition: stroke 0.3s;}
    .main-interview .swiper-act .navi:hover .ico{stroke:#fff;}
    .main-interview .swiper-act .swiper-controls .con{display: block; width: 20px; height: 20px;}
    /* main-interview focus */
    .main-interview .focus-line{outline:none !important;}



/* ----- main-guide ----- */
#itbankSection .main-guide {padding-bottom: 90px;}
#itbankSection .main-guide ul{display: flex;}
#itbankSection .main-guide ul li{
    margin-left: 40px; border-radius: 16px; background-color: #edf2f0; width: 25%;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
#itbankSection .main-guide ul li:first-child{margin-left: 0;}
#itbankSection .main-guide ul li .inner{display: block; position: relative; width: 100%; height: 100%; padding: 30px; }
#itbankSection .main-guide ul li h5{font-size: 20px; font-weight: 700; margin-bottom: 20px;}
#itbankSection .main-guide ul li h5 b{color:var(--color1);}
#itbankSection .main-guide ul li .txt{font-size: 18px; margin-bottom: 80px;}
#itbankSection .main-guide ul li .btm{display: flex; align-items:flex-end; position: absolute; bottom: 30px; left: 0; width: 100%; height: 70px; padding: 0 30px 8px;}
#itbankSection .main-guide ul li .btm::after{
    display: block; position: absolute; width: 70px; height: 70px; top: 0; right: 30px; content: '';
    background: url('/images/main/icon/2024/ico_rdmprofile.png') no-repeat; filter: grayscale(1) brightness(1.1); transition: filter 0.3s;
}
#itbankSection .main-guide ul li:nth-child(1) .btm::after{background-position: calc(-70px * 0) 0;}
#itbankSection .main-guide ul li:nth-child(2) .btm::after{background-position: calc(-70px * 1) 0;}
#itbankSection .main-guide ul li:nth-child(3) .btm::after{background-position: calc(-70px * 2) 0;}
#itbankSection .main-guide ul li:nth-child(4) .btm::after{background-position: calc(-70px * 3) 0;}
#itbankSection .main-guide ul li:hover{transform:translateY(-5px); background-color:#fff; box-shadow:3px 3px 15px -3px rgba(0,0,0,0.3);}
#itbankSection .main-guide ul li:hover .btm::after{filter: grayscale(0) brightness(1);}



/* ----- main-intro ----- */
#itbankSection .main-intro {background:#f2f2f2; padding-top: 70px;}
#itbankSection .main-intro .inner-wrap{display: flex; justify-content: space-between; margin-bottom: 40px;}
#itbankSection .main-intro .lft .box{display: inline-block; position: relative; width: 310px; height: 293px;}
#itbankSection .main-intro .lft .box:nth-child(1){background: url('/images/main/intro/2024/bg_intro01.png') no-repeat;}
#itbankSection .main-intro .lft .box:nth-child(2){background: url('/images/main/intro/2024/bg_intro02.png') no-repeat; margin-left: 20px;}
#itbankSection .main-intro .lft .box .txt{color: #111; font-size: 28px; font-weight: 700; padding-top: 45px;}
#itbankSection .main-intro .lft .box .year{position: absolute; top: 0; left: 0; color: #555; font-size: 18px;}

#itbankSection .main-intro .rgt {display: flex; justify-content: flex-end; margin-left: 20px;}
#itbankSection .main-intro .rgt .box{width: 290px;}
#itbankSection .main-intro .rgt .box .txtbox{padding: 40px 40px 0; height: 220px; color: #fff; border-top-left-radius: 16px; border-top-right-radius: 16px;}
#itbankSection .main-intro .rgt .box:nth-child(1) .txtbox{background: url('/images/main/intro/2024/bg_intro03.jpg') center top;}
#itbankSection .main-intro .rgt .box:nth-child(2) .txtbox{background: url('/images/main/intro/2024/bg_intro04.jpg') center top;}
#itbankSection .main-intro .rgt .box:nth-child(2){margin-left: 35px;}
#itbankSection .main-intro .rgt .box .txtbox .tit{font-size: 20px; margin-bottom: 10px;}
#itbankSection .main-intro .rgt .box .txtbox ol li{position: relative; font-size: 18px; font-weight: 300; line-height: 1.3em; padding-left: 10px; margin-bottom: 5px;}
#itbankSection .main-intro .rgt .box .txtbox ol li::before{display: block; position: absolute; font-weight: 700; top: 0; left: 0; content: '·';}
#itbankSection .main-intro .rgt .box .a-link{
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    color:#555; font-size: 16px; padding: 25px 40px; background-color: #fff;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; transition: color 0.3s;
}
#itbankSection .main-intro .rgt .box .a-link .ico{width: 15px; height: 15px; stroke-width: 1.5px; stroke: #777; fill:none; margin-bottom: 3px; transition: stroke 0.3s;}
#itbankSection .main-intro .rgt .box .a-link:hover{color: var(--color1);}
#itbankSection .main-intro .rgt .box .a-link:hover .ico{stroke: var(--color1);}
#itbankSection .main-intro .btm{
    display: flex; align-items: center; width: 100%; height: 70px; padding-left: 35px;
    background: #2f4359 url('/images/main/intro/2024/bg_btm.png') top right no-repeat;
    border-top-left-radius: 16px; border-top-right-radius: 16px;
}
#itbankSection .main-intro .btm p{color:#fff; font-size: 20px; font-weight: 500;}



/* ----- main-agreement ----- */
#itbankSection .main-agreement ul {
    display: flex; align-items: center; justify-content: space-around; height: 180px;
    list-style:none; padding:0; font-size:0;
}
#itbankSection .main-agreement ul li {display:inline-block;}