@charset 'utf-8';

/* 230712 추가 */
#wrap{height: auto;}

#main2 ul li{cursor: pointer;}
#main2 ul li .tit{color: #fff; font-weight: 500; margin-top: 12px; margin-bottom: 0; transition: .3s;}
#main2 ul li p{margin-top: 15px; color: #fff;}
#main2 ul li .img{background-color: #fff; border-radius: 5%; border: 1px solid #eee; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; margin: 0 auto; flex-direction: column; position: relative; transition: .3s;}
#main2 ul li p{opacity: 0; position: absolute; z-index: -1; visibility: hidden; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s; margin-top: 0; padding: 5px;}
#main2 ul li:hover p{opacity: 1; visibility: visible; z-index: 2;}
#main2 ul li:hover .img{background-color: #40ade2;}
#main2 ul li .img span{font-size: 60px; transition: .3s; color: #fff;}
#main2 ul li:hover .img span,
#main2 ul li:hover .tit{opacity: 0; visibility: hidden;}

@media all and (max-width:640px){
    #main2 ul li .img{width: 160px; height: 160px;}
#main2 ul li .img span{font-size: 48px;}
}

#main4 ol li .txt h3{margin-bottom: 15px;}
#main4 ol li .txt h3::after{display: none;}

#main6.main6_2{filter: hue-rotate(340deg);}
#main6.main6_2 .m_tit,
#main6.main6_2 .inner{filter: hue-rotate(-340deg);}
#main6 .tab{max-width: 1240px; margin-left:  auto; margin-right: auto;}
#main6 .tab li{width: 50%; margin: 0;text-align: center; font-size: 1.8rem; padding: 20px 0; background-color: #ddd; cursor: pointer; font-weight: 500; color: #999; transition: .5s;}
#main6 .tab li.on{background-color: #fff; color: #222;}
#main6 .tabcontent1{margin-top: 0; display: block;}
#main6 .tabcontent1 .cont{padding: 0; margin-top: 60px; border-radius: 0;}
#main6 .tabcontent1 .cont .txt{padding: 80px; width: 50%; height: 760px;}
#main6 .tabcontent1 .cont .txt .tit{margin-top: 0;}
#main6 .tabcontent1 .list{display: flex; margin-top: 35px; border-bottom: 1px solid #eee; padding-bottom: 20px;}
#main6 .tabcontent1 .list2{display: flex; margin-top: 35px; border-bottom: 1px solid #eee; padding-bottom: 20px;}
#main6 .tabcontent1 .list dd{opacity: 0.5; color: #000; font-weight: 600;  margin-right: 30px; cursor: pointer;}
#main6 .tabcontent1 .list2 dd{opacity: 0.5; color: #000; font-weight: 600;  margin-right: 30px; cursor: pointer;}
#main6 .tabcontent1 .list dd:last-child{margin-right: 0;}
#main6 .tabcontent1 .list2 dd:last-child{margin-right: 0;}
#main6 .tabcontent1 .list dd.on{opacity: 1;}
#main6 .tabcontent1 .list2 dd.on{opacity: 1;}
#main6 .tabcontent1 .cont .txt ul h3{width: 100%; padding: 8px 20px;}
#main6 .tabcontent1 .cont .img{width: 50%; background-size: cover; background-repeat: no-repeat; background-position: center center; margin-right: 0;}
#main6 #tab1 .cont .img{background-image: url(/images/main/main6_tab1.jpg);}
#main6 #tab2 .cont .img{background-image: url(/images/main/main6_tab2.jpg);}
#main6 .tabs{display: none;}
#main6 .tabss{display: none;}
#main6 .tabs.on{display: block;}
#main6 .tabss.on{display: block;}

@media all and (max-width:1240px){
    #main6 .tabcontent1 .cont{display: flex;}
    #main6 .tabcontent1 .cont .txt{text-align: left; padding: 60px; height: auto;}
    #main6 .tabcontent1 .cont .img{margin-top: 0;}
}
@media all and (max-width:976px){
    #main6 .tabcontent1 .cont{flex-direction: column; margin-top: 40px;}
    #main6 .tabcontent1 .cont .txt,
    #main6 .tabcontent1 .cont .img{width: 100%;}
    #main6 .tabcontent1 .cont .img{height: 40vw; order: -1;}
    #main6 .tabcontent1 .cont .txt{padding: 40px;}
}
@media all and (max-width:640px){
    #main6 .tabcontent1 .cont .txt{padding: 25px;}
    #main6 .tabcontent1 .list,
    #main6 .tabcontent1 .list2{margin-top: 20px;}
    #main6 .tabcontent1 .list dd{font-size: 1.5em;}
    #main6 .tabcontent1 .list2 dd{font-size: 1.5em;}
}
@media all and (max-width:480px){
    #main6 .tabcontent1 .cont .txt{min-height: 115vw;}
}

#main7 .tabcontent1{padding: 70px 0;}
#main7 .box{padding-top: 0;}
#main7 .tabcontent1 .inner{gap:0 80px;}
#main7 .tabcontent1 .inner > .img{width: 50%;}
#main7 .tabcontent1 .inner > .img img{width: 100%; max-width:100%;}
#main7 .tabcontent1 .info{width: calc(50% - 80px);}
#main7 .tabcontent1 .info ul li .img span{font-size: 40px; color: #000;}
#main7 .tabcontent1 .info ul{border: 1px solid #eee; margin-top: 25px;}
#main7 .tabcontent1 .info ul li{background-color: #fff; width: 25%; text-align: center; margin-right: 0; padding: 20px 0;}
#main7 .tabcontent1 .info ul li:not(:last-child){border-right: 1px solid #eee;}
#main7 .tabcontent1 .info ul li p{margin-top: 5px;}

@media all and (max-width:1240px){
    #main7 .tabcontent1{padding: 55px 0;}
    #main7 .tabcontent1 .inner{gap:0 50px;}
    #main7 .tabcontent1 .info {width: calc(50% - 50px);}
}
@media all and (max-width:976px){
    #main7 .tabcontent1 .inner{flex-direction: column;}
    #main7 .tabcontent1 .info{width: 100%;}
    #main7 .tabcontent1 .inner > .img{width: 100%; margin-top: 40px;}
    #main7 .tabcontent1 .inner > .img img{max-width: 100%;}
}


@media all and (max-width:1000px){
    #main8 .grade ul li{flex: 1 auto; padding-right: 8px; padding-left: 8px; width: 50%;}
    #main8 .grade ul li p br{display: none;}
}

@media all and (max-width:640px){
    #main9 ul li{width: 88%; margin: 0 auto;}
}

#main11 .inner .txt_box .txt h3{color: #222;}


#main4-1{display: flex;}
#main4-1 .box{flex: 25%; padding: 60px 40px 0; height: 720px; filter: brightness(.95) grayscale(.3); transition: .4s;}
#main4-1 .box:nth-child(1){background: #f5faff url(/images/main/main4-1_img1.png) no-repeat right bottom / auto auto;}
#main4-1 .box:nth-child(2){background: #e3f0ff url(/images/main/main4-1_img2_260327.png?v=1) no-repeat right bottom / auto auto;}
#main4-1 .box:nth-child(3){background: #ebf8ff url(/images/main/main4-1_img3.png) no-repeat right bottom / auto auto;}
#main4-1 .box:nth-child(4){background: #e1e9ff url(/images/main/main4-1_img4.png) no-repeat right bottom / auto auto;}
#main4-1 .box.on{flex: 30%; filter: brightness(1) grayscale(0);}
#main4-1 .box .txt{}
#main4-1 .box .txt h4{font-size: 22px; font-weight: 700; filter: grayscale(1); transition: .4s; opacity: 0.5;}
#main4-1 .box.on .txt h4{filter: grayscale(0); opacity: 1;}
#main4-1 .box .txt h3{font-size: 36px;
    font-weight: 800;
    margin: 15px 0 20px;
    color: #aaa; transition: .4s; line-height: 1.3em;}
#main4-1 .box.on .txt h3{color: #000;}
#main4-1 .box .txt p{word-break: keep-all; font-size: 20px;
    font-weight: 500;
    color: #444; filter: grayscale(1); transition: .4s; opacity: 0.5;}
#main4-1 .box.on .txt p{filter: grayscale(0); opacity: 1;}

@media all and (max-width:1600px){
	#main4-1 .box{-webkit-background-size: 85% auto !important;
	background-size: 85% auto !important;}
}
@media all and (max-width:1280px){
	#main4-1 .box{height: 50vw; padding: 40px 30px 0;}
	#main4-1 .box .txt h4{font-size: 20px;}
	#main4-1 .box .txt h3{font-size: 30px; margin: 10px 0 12px;}
	#main4-1 .box .txt p{font-size: 18px;}
}
@media all and (max-width:976px){
    #main4-1 .box{height: 53vw; padding: 35px 20px 0;}
	#main4-1 .box.on{flex: 28%;}
	#main4-1 .box .txt h4{font-size: 16px;}
	#main4-1 .box .txt h3{font-size: 25px; margin: 10px 0 12px;}
    #main4-1 .box .txt p{font-size: 15px;}
}
@media all and (max-width:768px){
	#main4-1{flex-wrap: wrap;}
	#main4-1 .box{min-height: 300px;height: 60vw; flex:50%; -webkit-background-size: auto 50% !important;	background-size: auto 50% !important; padding: 25px 20px 0; filter: brightness(1) grayscale(0);}
	#main4-1 .box.on{flex: 50%;}
	#main4-1 .box .txt h4{filter: grayscale(0); opacity: 1;}
	#main4-1 .box .txt h3{color: #000;}
	#main4-1 .box .txt p{filter: grayscale(0); opacity: 1;}
}
@media all and (max-width:500px){
	#main4-1 .box{  height: 75vw; -webkit-background-size: auto 45% !important;	background-size: auto 45% !important;}
}