/* PC */
@media screen and (min-width:1201px) {
/* common */
.title{font-size: 2.5em; font-weight: 700;}

/* ceo */
#ceo{position: relative; padding-top: 200px; width: 100%; max-width: 1200px; margin: 0 auto;}
#ceo .ceo_inner{background-color: #fff; margin-top: -100px; opacity: 0;}
#ceo h2{font-size: 3em; font-weight: 700; text-align: center; margin-top: -100px; opacity: 0;}
#ceo .ceo_wrap{margin-top: 150px; display: flex; justify-content: space-between; align-items: center;}
#ceo .ceo_wrap div{width: 48%;}
#ceo .ceo_wrap .ceo_text{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#ceo .ceo_wrap .ceo_text p{text-align: center; font-size: 1.5em; padding-bottom: 45px;}
#ceo .ceo_wrap .ceo_text h3{font-size: 1.3em; font-weight: 700;}
#ceo .ceo_wrap .ceo_img img{width: 100%;}

/* our */
#our{position: relative; padding: 200px 0; opacity: 0;}
#our .text{text-align: center; padding-bottom: 80px;}
#our .our_list{position: relative; overflow: hidden; margin-top: 100px;}
#our .our_list ul{position: relative; width: 250%;}
#our .our_list ul::after{content: ""; display: block; clear: both;}
#our .our_list ul li{float: left; width: 8%; margin: 0 1%; overflow: hidden;}
#our .our_list ul li h3{text-align: center; margin-top: 40px; font-size: 1.7em;}
#our .our_list ul li p{text-align: center; margin-top: 10px; font-size: 1.2em;}
#our .our_list ul li img{width: 100%;}
#our .our_btn{position: absolute; top: 92%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#our .our_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#our button:hover{background-color: rgba(255,255,255,1);}

/* mid_text */
#mid_text{position: relative; padding: 200px 0; width: 70%; margin: 0 auto; text-align: center;}
#mid_text p{font-size: 3em; margin-top: -100px; opacity: 0;}

/* with */
#with{position: relative; padding: 200px 0 100px 0; width: 100%; max-width: 1200px; margin: 0 auto; opacity: 0;}
#with .text{text-align: center; margin-bottom: 80px;}
#with .with_list ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#with .with_list ul li{margin-bottom: 80px; transition-duration: 0.5s; width: 30%;}
#with .with_list ul li a img{width: 100%; margin-bottom: 50px; transition-duration: 0.5s;}
#with .with_list ul li a img:hover{transform: scale(1.05);}
#with .with_list ul li a p{text-align: center; font-size: 1.2em;}
#with .with_list div{display: flex; justify-content: center; align-items: center;}
#with .with_list div .more_btn{background: none; cursor: pointer;}
#with .with_list div .more_btn:hover{background-color: #fff;}
}










/* Tablet 가로 */
@media screen and (min-width:901px) and (max-width:1200px) {
/* common */
.title{font-size: 2em; font-weight: 700;}

/* ceo */
#ceo{position: relative; padding-top: 150px; width: 92%; margin: 0 auto;}
#ceo .ceo_inner{background-color: #fff; margin-top: -100px; opacity: 0;}
#ceo h2{font-size: 2em; font-weight: 700; text-align: center; margin-top: -100px; opacity: 0;}
#ceo .ceo_wrap{margin-top: 150px; display: flex; justify-content: space-between; align-items: center;}
#ceo .ceo_wrap div{width: 48%;}
#ceo .ceo_wrap .ceo_text{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#ceo .ceo_wrap .ceo_text p{text-align: center; font-size: 1.15em; padding-bottom: 45px;}
#ceo .ceo_wrap .ceo_text h3{font-size: 1.3em; font-weight: 700;}
#ceo .ceo_wrap .ceo_img img{width: 100%;}

/* our */
#our{position: relative; padding: 150px 0; opacity: 0;}
#our .text{text-align: center; padding-bottom: 80px;}
#our .our_list{position: relative; overflow: hidden; margin-top: 100px;}
#our .our_list ul{position: relative; width: 250%;}
#our .our_list ul::after{content: ""; display: block; clear: both;}
#our .our_list ul li{float: left; width: 8%; margin: 0 1%; overflow: hidden;}
#our .our_list ul li h3{text-align: center; margin-top: 40px; font-size: 1.3em;}
#our .our_list ul li p{text-align: center; margin-top: 10px; font-size: 1.15em;}
#our .our_list ul li img{width: 100%;}
#our .our_btn{position: absolute; top: 92%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#our .our_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#our button:hover{background-color: rgba(255,255,255,1);}

/* mid_text */
#mid_text{position: relative; padding: 100px 0; width: 70%; margin: 0 auto; text-align: center;}
#mid_text p{font-size: 2em; margin-top: -100px; opacity: 0;}

/* with */
#with{position: relative; padding: 150px 0 100px 0; width: 92%; margin: 0 auto; opacity: 0;}
#with .text{text-align: center; margin-bottom: 80px;}
#with .with_list ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#with .with_list ul li{width: 32%; margin-bottom: 80px; transition-duration: 0.5s;}
#with .with_list ul li a img{width: 100%; margin-bottom: 50px; transition-duration: 0.5s;}
#with .with_list ul li a img:hover{transform: scale(1.05);}
#with .with_list ul li a p{text-align: center; font-size: 1.4em;}
#with .with_list div{display: flex; justify-content: center; align-items: center;}
#with .with_list div .more_btn{background: none; cursor: pointer;}
#with .with_list div .more_btn:hover{background-color: #fff;}
}










/* Tablet 세로 */
@media screen and (min-width:601px) and (max-width:900px) {
/* common */
.title{font-size: 1.6em; font-weight: 700;}

/* ceo */
#ceo{position: relative; padding-top: 150px; width: 92%; margin: 0 auto;}
#ceo .ceo_inner{background-color: #fff; margin-top: -100px; opacity: 0;}
#ceo h2{font-size: 1.7em; font-weight: 700; text-align: center; margin-top: -100px; opacity: 0;}
#ceo .ceo_wrap{margin-top: 100px; display: flex; justify-content: space-between; align-items: center;}
#ceo .ceo_wrap .ceo_text{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%;}
#ceo .ceo_wrap .ceo_text p{text-align: center; font-size: 1em; padding: 20px;}
#ceo .ceo_wrap .ceo_text h3{font-size: 1.15em; font-weight: 700; text-align: center; padding: 10px;}
#ceo .ceo_wrap .ceo_img{width: 50%;}
#ceo .ceo_wrap .ceo_img img{width: 100%;}

/* our */
#our{position: relative; padding: 100px 0; opacity: 0;}
#our .text{text-align: center; padding-bottom: 20px;}
#our .our_list{position: relative; overflow: hidden; margin-top: 100px;}
#our .our_list ul{position: relative; width: 500%;}
#our .our_list ul::after{content: ""; display: block; clear: both;}
#our .our_list ul li{float: left; width: 8%; margin: 0 1%; overflow: hidden;}
#our .our_list ul li h3{text-align: center; margin-top: 40px; font-size: 1.3em;}
#our .our_list ul li p{text-align: center; margin-top: 10px; font-size: 1em;}
#our .our_list ul li img{width: 100%;}
#our .our_btn{position: absolute; top: 92%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#our .our_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#our button:hover{background-color: rgba(255,255,255,1);}

/* mid_text */
#mid_text{position: relative; padding: 100px 0; width: 92%; margin: 0 auto; text-align: center;}
#mid_text p{font-size: 2em; margin-top: -100px; opacity: 0;}

/* with */
#with{position: relative; padding: 100px 0; width: 92%; margin: 0 auto; opacity: 0;}
#with .text{text-align: center; margin-bottom: 80px;}
#with .with_list ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#with .with_list ul li{width: 32%; margin-bottom: 80px; transition-duration: 0.5s;}
#with .with_list ul li a img{width: 100%; margin-bottom: 50px; transition-duration: 0.5s;}
#with .with_list ul li a img:hover{transform: scale(1.05);}
#with .with_list ul li a p{text-align: center; font-size: 1em;}
#with .with_list div{display: flex; justify-content: center; align-items: center;}
#with .with_list div .more_btn{background: none; cursor: pointer;}
#with .with_list div .more_btn:hover{background-color: #fff;}
}









/* Mobile */
@media screen and (max-width:600px) {
/* common */
.title{font-size: 1.3em; font-weight: 700;}

/* ceo */
#ceo{position: relative; padding-top: 100px; width: 92%; margin: 0 auto;}
#ceo .ceo_inner{background-color: #fff; margin-top: -100px; opacity: 0;}
#ceo h2{font-size: 1em; font-weight: 700; text-align: center; margin-top: -100px; opacity: 0;}
#ceo .ceo_wrap{margin-top: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#ceo .ceo_wrap .ceo_text{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#ceo .ceo_wrap .ceo_text p{text-align: center; font-size: 1em; padding: 20px 0;}
#ceo .ceo_wrap .ceo_text h3{font-size: 1.15em; font-weight: 700; text-align: center; padding: 10px; margin-bottom: 30px;}
#ceo .ceo_wrap .ceo_img img{width: 100%;}

/* our */
#our{position: relative; padding: 100px 0; opacity: 0;}
#our .text{text-align: center; padding-bottom: 20px;}
#our .our_list{position: relative; overflow: hidden; margin-top: 50px;}
#our .our_list ul{position: relative; width: 500%;}
#our .our_list ul::after{content: ""; display: block; clear: both;}
#our .our_list ul li{float: left; width: 8%; margin: 0 1%; overflow: hidden;}
#our .our_list ul li h3{text-align: center; margin-top: 40px; font-size: 1.3em;}
#our .our_list ul li p{text-align: center; margin-top: 10px; font-size: 1em;}
#our .our_list ul li img{width: 100%;}
#our .our_btn{position: absolute; top: 92%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#our .our_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#our button:hover{background-color: rgba(255,255,255,1);}

/* mid_text */
#mid_text{position: relative; padding: 80px 0; width: 92%; margin: 0 auto; text-align: center;}
#mid_text p{font-size: 1.15em; margin-top: -100px; opacity: 0;}

/* with */
#with{position: relative; padding: 80px 0; width: 92%; margin: 0 auto; opacity: 0;}
#with .text{text-align: center; margin-bottom: 80px;}
#with .with_list ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
#with .with_list ul li{width: 48%; margin-bottom: 80px; transition-duration: 0.5s;}
#with .with_list ul li a img{width: 100%; margin-bottom: 50px; transition-duration: 0.5s;}
#with .with_list ul li a img:hover{transform: scale(1.05);}
#with .with_list ul li a p{text-align: center; font-size: 1em;}
#with .with_list div{display: flex; justify-content: center; align-items: center;}
#with .with_list div .more_btn{background: none; cursor: pointer;}
#with .with_list div .more_btn:hover{background-color: #fff;}
}