@charset "utf-8";



/* pc */
@media screen and (min-width:1201px) {
    .out{position: relative; margin: 200px auto; overflow: hidden;}
    .out .out_wrap{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .out .main_title{top: 100px; opacity: 0; text-align: center;}
    .out .img_box img{width: 100%;}
    
    .out .out1{display: flex; justify-content: space-between; align-items: center; margin-top: 50px;}
    
    .out .out1>.img_box{position: relative; width: 40%; left: -100px; opacity: 0;}
    .out .out1>.img_box .over_img{position: absolute; left: 50%; top: 50%; transform: translate(-53%,-51%); width: 90%;}
    .out .out1>.img_box .over_img img{width: 100%;}
    
    .out .out1>.text_wrap{width: 50%; position: relative; display: flex; flex-direction: column; justify-content: center; height: 150px; right: -100px; opacity: 0;}
    .out .out1>.text_wrap ul{position: relative; margin-bottom:5%;}
    .out .out1>.text_wrap .sub_title{padding: 20px 0;}
    /* .out .out1>.text_wrap .sub_title li:last-child{padding-bottom: 50px;} */
    .out .out1>.text_wrap .sub_title li::after{content: ''; position:absolute; left: 0; bottom: -8px; width: 60%; height: 2px; background-color: #FFAA45;}
    
    .out .out1>.text_wrap ul li{position: relative;display: none;}
    
    .out .out1>.text_wrap ul li:nth-child(1){display: block;}
    .out .out1>.text_wrap .sub_title h3{font-weight: 500;}
    
    .out .out1>.text_wrap .sub_text p{font-size: 1.3em;}
    
    .out .out2{position: relative; display: flex; justify-content: space-evenly; align-items: center; text-align: center; margin-top: 50px;}
    .out .out2 li .img_box{ filter: grayscale(100%);}
    .out .out2 li{width: 25%; position: relative; top: 100px; opacity: 0;}
    .out .out2 li.out_select .img_box{border-radius: 50%; box-shadow: 3px 3px 4px rgba(0,0,0,0.6); filter: grayscale(0%);}
    .out .out2 li.out_select h4{color: #FFAA45; font-weight: 700;}
    .out .out2 li h4{font-size: 1.3em; margin-top: 30px;}
    
    
    
    /* vision */
    .vision{width: 100%; margin: 200px auto; background-color: #305AC1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8% 0 12% 0; overflow: hidden; text-align: center;}
    .vision .main_title{top: 100px; opacity: 0;}
    
    .vision .img_box img{width: 100%;}
    .vision h2, .vision h3{color: #fff;}
    .vision h4{color: #fff; font-size: 1.4em; margin-bottom: 5%;}
    
    .vision .title_box{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .vision .title_box .con_title{text-align: center; margin-top: 10%; font-weight: 500; position: relative; top: 100px; opacity: 0;}
    
    .vision .con_wrap{position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-top: 150px; width: 100%}
    .vision .con_wrap>div>span{position: absolute; width: 110%; height: 110%; background-color: #305AC1; left: -5%; top: -5%;}
    .vision .con_wrap .line{flex-grow: 1; height: 2px; background-color: #fff; transition-duration: 0.5s; position: relative;}
    .vision .con_wrap .circle{position: relative; border: 2px solid #fff; width: 20%; padding: 10% 0; border-radius: 50%;transition-duration: 0.5s;}/* 세로부터 30% up */
    
    .vision .con_wrap .circle .text_box{position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; opacity: 0;}
    
    .vision .info_text{position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; width: 100%; opacity: 0;}
    .vision .circle3 .info_text{bottom: -25%;}

    
    
    /* talent */
    .talent{ padding-bottom: 20%; position: relative;}
    .talent .img_box img{width: 100%;}
    .talent h2{position: sticky; left: 100px; top: 200px;}
    .talent .img_list{display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: 25%;}
    .talent .img_list li{position: relative; width: 45%; margin-bottom: 150px;}
    .talent .img_list li:nth-child(2n){transform: translateY(40%);}
    .talent .img_list li h3{font-size: 1.4vw; font-weight: 500; margin-top: 30px;}
    .talent .img_list li h4{margin: 20px 0;}
    .talent .img_list li p{font-size: 1.1vw;}
}





@media screen and (min-width:801px) and (max-width:1200px) {
    .out{position: relative; margin: 200px auto; overflow: hidden;}
    .out .out_wrap{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .out .main_title{top: 100px; opacity: 0; text-align: center;}
    .out .img_box img{width: 100%;}
    
    .out .out1{display: flex; justify-content: space-between; align-items: center; margin-top: 50px;}
    
    .out .out1>.img_box{position: relative; width: 40%; left: -100px; opacity: 0;}
    .out .out1>.img_box .over_img{position: absolute; left: 50%; top: 50%; transform: translate(-53%,-51%); width: 90%;}
    .out .out1>.img_box .over_img img{width: 100%;}
    
    .out .out1>.text_wrap{width: 50%; position: relative; display: flex; flex-direction: column; justify-content: center; height: 150px; right: -100px; opacity: 0;}
    .out .out1>.text_wrap ul{position: relative; margin-bottom:5%;}
    .out .out1>.text_wrap .sub_title{padding: 20px 0;}
    /* .out .out1>.text_wrap .sub_title li:last-child{padding-bottom: 50px;} */
    .out .out1>.text_wrap .sub_title li::after{content: ''; position:absolute; left: 0; bottom: -8px; width: 60%; height: 2px; background-color: #FFAA45;}
    
    .out .out1>.text_wrap ul li{position: relative;display: none;}
    
    .out .out1>.text_wrap ul li:nth-child(1){display: block;}
    .out .out1>.text_wrap .sub_title h3{font-weight: 500;}
    
    .out .out1>.text_wrap .sub_text p{font-size: 1.3em;}
    
    .out .out2{position: relative; display: flex; justify-content: space-evenly; align-items: center; text-align: center; margin-top: 50px;}
    .out .out2 li .img_box{ filter: grayscale(100%);}
    .out .out2 li{width: 25%; position: relative; top: 100px; opacity: 0;}
    .out .out2 li.out_select .img_box{border-radius: 50%; box-shadow: 3px 3px 4px rgba(0,0,0,0.6); filter: grayscale(0%);}
    .out .out2 li.out_select h4{color: #FFAA45; font-weight: 700;}
    .out .out2 li h4{font-size: 1.3em; margin-top: 30px;}
    
    
    
    /* vision */
    .vision{width: 100%; margin: 200px auto; background-color: #305AC1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15% 0 20% 0; overflow: hidden; text-align: center;}
    .vision .main_title{top: 100px; opacity: 0;}
    
    .vision .img_box img{width: 100%;}
    .vision h2, .vision h3{color: #fff;}
    .vision h4{color: #fff; font-size: 1.4em; margin-bottom: 5%;}
    
    .vision .title_box{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .vision .title_box .con_title{text-align: center; margin-top: 10%; font-weight: 500; position: relative; top: 100px; opacity: 0;}
    
    .vision .con_wrap{position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-top: 150px; width: 100%}
    .vision .con_wrap>div>span{position: absolute; width: 110%; height: 110%; background-color: #305AC1; left: -5%; top: -5%;}
    .vision .con_wrap .line{flex-grow: 1; height: 2px; background-color: #fff; transition-duration: 0.5s; position: relative;}
    .vision .con_wrap .circle{position: relative; border: 2px solid #fff; width: 30%; padding: 15% 0; border-radius: 50%;transition-duration: 0.5s;}/* 세로부터 30% up */
    
    .vision .con_wrap .circle .text_box{position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; opacity: 0;}
    
    .vision .info_text{position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; width: 100%; opacity: 0;}
    .vision .circle3 .info_text{bottom: -25%;}

    
    
    /* talent */
    .talent{ padding-bottom: 20%; position: relative;}
    .talent .img_box img{width: 100%;}
    .talent h2{position: sticky; left: 100px; top: 200px;}
    .talent .img_list{display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: 25%;}
    .talent .img_list li{position: relative; width: 45%; margin-bottom: 150px;}
    .talent .img_list li:nth-child(2n){transform: translateY(40%);}
    .talent .img_list li h3{font-size: 1.4em; font-weight: 500; margin-top: 30px;}
    .talent .img_list li h4{margin: 20px 0;}
    .talent .img_list li p{font-size: 1.1em;}






}


@media screen and (min-width:601px) and (max-width:800px) {
    .out{position: relative; margin: 200px auto; overflow: hidden;}
    .out .out_wrap{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .out .main_title{top: 100px; opacity: 0; text-align: center;}
    .out .img_box img{width: 100%;}
    
    .out .out1{display: flex; justify-content: space-between; align-items: center; margin-top: 50px;}
    
    .out .out1>.img_box{position: relative; width: 40%; left: -100px; opacity: 0;}
    .out .out1>.img_box .over_img{position: absolute; left: 50%; top: 50%; transform: translate(-53%,-51%); width: 90%;}
    .out .out1>.img_box .over_img img{width: 100%;}
    
    .out .out1>.text_wrap{width: 50%; position: relative; display: flex; flex-direction: column; justify-content: center; height: 150px; right: -100px; opacity: 0;}
    .out .out1>.text_wrap ul{position: relative; margin-bottom:5%;}
    .out .out1>.text_wrap .sub_title{padding: 20px 0;}
    /* .out .out1>.text_wrap .sub_title li:last-child{padding-bottom: 50px;} */
    .out .out1>.text_wrap .sub_title li::after{content: ''; position:absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background-color: #FFAA45;}
    
    .out .out1>.text_wrap ul li{position: relative;display: none;}
    
    .out .out1>.text_wrap ul li:nth-child(1){display: block;}
    .out .out1>.text_wrap .sub_title h3{font-weight: 500;}
    
    .out .out1>.text_wrap .sub_text p{font-size: 1.1em;}
    
    .out .out2{position: relative; display: flex; justify-content: space-evenly; align-items: center; text-align: center; margin-top: 50px;}
    .out .out2 li .img_box{ filter: grayscale(100%);}
    .out .out2 li{width: 30%; position: relative; top: 100px; opacity: 0;}
    .out .out2 li.out_select .img_box{border-radius: 50%; box-shadow: 3px 3px 4px rgba(0,0,0,0.6); filter: grayscale(0%);}
    .out .out2 li.out_select h4{color: #FFAA45; font-weight: 700;}
    .out .out2 li h4{font-size: 1.1em; margin-top: 30px;}
    
    
    
    /* vision */
    .vision{width: 100%; margin: 200px auto; background-color: #305AC1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15% 0 20% 0; overflow: hidden; text-align: center;}
    .vision .main_title{top: 100px; opacity: 0;}
    
    .vision .img_box img{width: 100%;}
    .vision h2, .vision h3{color: #fff;}
    .vision h4{color: #fff; font-size: 1.4em; margin-bottom: 5%;}
    
    .vision .title_box{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .vision .title_box .con_title{text-align: center; margin-top: 10%; font-weight: 500; position: relative; top: 100px; opacity: 0;}
    
    .vision .con_wrap{position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-top: 150px; width: 100%}
    .vision .con_wrap>div>span{position: absolute; width: 110%; height: 110%; background-color: #305AC1; left: -5%; top: -5%;}
    .vision .con_wrap .line{flex-grow: 1; height: 2px; background-color: #fff; transition-duration: 0.5s; position: relative;}
    .vision .con_wrap .circle{position: relative; border: 2px solid #fff; width: 30%; padding: 15% 0; border-radius: 50%;transition-duration: 0.5s;}/* 세로부터 30% up */
    
    .vision .con_wrap .circle .text_box{position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; opacity: 0;}
    
    .vision .info_text{display: none;}
    /* .vision .circle3 .info_text{bottom: -55%;} */

    
    
    /* talent */
    .talent{ padding-bottom: 20%; position: relative;}
    .talent .img_box img{width: 100%;}
    .talent h2{position: sticky; left: 100px; top: 200px;}
    .talent .img_list{display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: 25%;}
    .talent .img_list li{position: relative; width: 100%; margin-bottom: 50px;}
    .talent .img_list li h3{font-size: 1.2em; font-weight: 500; margin-top: 30px;}
    .talent .img_list li h4{margin: 20px 0;}
}







@media screen and (max-width:600px) {
    .out{position: relative; margin: 200px auto; overflow: hidden;}
    .out .out_wrap{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .out .main_title{top: 100px; opacity: 0; text-align: center;}
    .out .img_box img{width: 100%;}
    
    .out .out1{margin-top: 50px;}
    
    .out .out1>.img_box{display: none;}

    .out .out1>.text_wrap{position: relative; display: flex; flex-direction: column; justify-content: center; height: 150px; right: -100px; opacity: 0;}
    .out .out1>.text_wrap ul{position: relative; margin-bottom:5%;}
    .out .out1>.text_wrap .sub_title{padding: 20px 0; text-align: center;}
    /* .out .out1>.text_wrap .sub_title li:last-child{padding-bottom: 50px;} */
    .out .out1>.text_wrap .sub_title li::after{content: ''; position:absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background-color: #FFAA45;}
    
    .out .out1>.text_wrap ul li{position: relative;display: none;}
    
    .out .out1>.text_wrap ul li:nth-child(1){display: block;}
    .out .out1>.text_wrap .sub_title h3{font-weight: 500;}
    
    .out .out2{position: relative; display: flex; justify-content: space-evenly; text-align: center; margin-top: 50px;}
    .out .out2 li .img_box{ filter: grayscale(100%);}
    .out .out2 li{width: 30%; position: relative; top: 100px; opacity: 0;}
    .out .out2 li.out_select .img_box{border-radius: 50%; box-shadow: 3px 3px 4px rgba(0,0,0,0.6); filter: grayscale(0%);}
    .out .out2 li.out_select h4{color: #FFAA45; font-weight: 700;}
    .out .out2 li h4{margin-top: 30px;}
    
    
    
    /* vision */
    .vision{width: 100%; margin: 200px auto; background-color: #305AC1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15% 0 20% 0; overflow: hidden; text-align: center;}
    .vision .img_box img{width: 40px;}
    .vision .main_title{top: 100px; opacity: 0;}
    
    .vision h2, .vision h3{color: #fff;}
    .vision h4{color: #fff; font-size: 1em; margin-bottom: 5%;}
    
    .vision .title_box{width: 90%; max-width: 1440px; position: relative; margin: 0 auto;}
    .vision .title_box .con_title{text-align: center; margin-top: 10%; font-weight: 500; position: relative; top: 100px; opacity: 0;}
    
    .vision .con_wrap{position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-top: 150px; width: 100%}
    .vision .con_wrap>div>span{position: absolute; width: 110%; height: 110%; background-color: #305AC1; left: -5%; top: -5%;}
    .vision .con_wrap .line{flex-grow: 1; height: 2px; background-color: #fff; transition-duration: 0.5s; position: relative;}
    .vision .con_wrap .circle{position: relative; border: 2px solid #fff; width: 30%; padding: 15% 0; border-radius: 50%;transition-duration: 0.5s;}/* 세로부터 30% up */
    
    .vision .con_wrap .circle .text_box{position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; opacity: 0;}
    
    .vision .info_text{display: none;}
    /* .vision .circle3 .info_text{bottom: -55%;} */

    
    
    /* talent */
    .talent{ padding-bottom: 20%; position: relative;}
    .talent .img_box img{width: 100%;}
    .talent h2{position: relative;}
    .talent .img_list{display: flex; justify-content: center; flex-wrap: wrap; margin-top: 50px;}
    .talent .img_list li{position: relative; width: 100%; margin-bottom: 50px;}
    .talent .img_list li h3{font-size: 1.2em; font-weight: 500; margin-top: 30px;}
    .talent .img_list li h4{margin: 20px 0;}
}