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

/* banner */
#banner{position: relative; width: 100%; height: 200px; top: 80px; background-image: url(../img/technology/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* accordion */
#accordion{position: relative; padding: 200px 0; width: 100%; max-width: 1440px; margin: 0 auto;}
#accordion .tech_title{text-align: center; padding-bottom: 150px;}
#accordion .tech_title h2{opacity: 0;}
#accordion .tech_title p{margin-top: 40px; font-size: 1.3em; opacity: 0;}
#accordion .con{height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition-duration: 0.5s;}
#accordion .con p{font-size: 1.5em; margin: 30px 0; color: #fff; transition-duration: 0.5s;}
#accordion .con .more_btn{border: 1px solid #fff; color: #fff;}
#accordion .con .more_btn:hover{color: #007FFD;}
#accordion .con:hover{height: 400px;}
#accordion .con:hover p{font-size: 2.5em; font-weight: 700;}
#accordion .tech_con1{background-image: url(../img/technology/acco0w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con2{background-image: url(../img/technology/acco1w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con3{background-image: url(../img/technology/acco2w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con4{background-image: url(../img/technology/acco3w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con5{background-image: url(../img/technology/acco4w.jpg); background-position: center; background-size: cover;}

/* llama2 */
#llama2{position: relative; padding: 100px 0; background-image: url(../img/technology/llama.jpg); background-position: center; background-size: cover;}
#llama2 .la_text{width: 80%; margin: 0 auto;}
#llama2 .la_text p{width: 45%; font-size: 1.3em; padding: 20px 0 40px 0;}

/* social */
#social{position: relative; padding: 200px 0; width: 80%; margin: 0 auto;}
#social .so_text{padding: 80px 0 150px 0; margin-top: -100px; opacity: 0;}
#social .cont{display: flex; justify-content: space-between; align-items: center; padding: 40px; border-top: 1px solid #808080; margin-top: -100px; opacity: 0;}
#social .cont p{font-size: 1.3em;}
#social .so_con3{border-bottom: 1px solid #808080;}

/* quest */
#quest{position: relative; padding: 100px 0 200px 0; width: 70%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; overflow: hidden;}
#quest .quest_img{position: relative; width: 48%; left: -100px; opacity: 0;}
#quest .quest_img img{width: 100%;}
#quest .quest_text{position: relative; width: 48%; display: flex; flex-direction: column; align-items: center; right: -100px; opacity: 0;}
#quest .quest_text p{text-align: center; padding: 40px 0 80px 0; font-size: 1.3em;}   
}








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

/* banner */
#banner{position: relative; width: 100%; height: 200px; top: 60px; background-image: url(../img/technology/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* accordion */
#accordion{position: relative; padding: 150px 0;}
#accordion .tech_title{text-align: center; padding-bottom: 100px;}
#accordion .tech_title h2{font-size: 2em; opacity: 0;}
#accordion .tech_title p{margin-top: 40px; font-size: 1.15em; opacity: 0;}
#accordion .con{height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition-duration: 0.5s;}
#accordion .con p{font-size: 1.3em; margin: 30px 0; color: #fff; transition-duration: 0.5s;}
#accordion .con .more_btn{border: 1px solid #fff; color: #fff;}
#accordion .con .more_btn:hover{color: #007FFD;}
#accordion .con:hover{height: 300px;}
#accordion .con:hover p{font-size: 1.7em; font-weight: 700;}
#accordion .tech_con1{background-image: url(../img/technology/acco0w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con2{background-image: url(../img/technology/acco1w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con3{background-image: url(../img/technology/acco2w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con4{background-image: url(../img/technology/acco3w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con5{background-image: url(../img/technology/acco4w.jpg); background-position: center; background-size: cover;}

/* llama2 */
#llama2{position: relative; padding: 100px 0; background-image: url(../img/technology/llama.jpg); background-position: center; background-size: cover;}
#llama2 .la_text{width: 80%; margin: 0 auto;}
#llama2 .la_text p{width: 50%; font-size: 1em; padding: 20px 0 40px 0;}

/* social */
#social{position: relative; padding: 150px 0; width: 92%; margin: 0 auto;}
#social .so_text{padding: 80px 0 150px 0; text-align: center; margin-top: -100px; opacity: 0;}
#social .cont{display: flex; justify-content: space-between; align-items: center; padding: 40px; border-top: 1px solid #808080; margin-top: -100px; opacity: 0;}
#social .cont p{font-size: 1.3em;}
#social .so_con3{border-bottom: 1px solid #808080;}

/* quest */
#quest{position: relative; padding: 100px 0 150px 0; width: 92%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; overflow: hidden;}
#quest .quest_img{width: 48%; position: relative; left: -100px; opacity: 0;}
#quest .quest_img img{width: 100%;}
#quest .quest_text{width: 48%; display: flex; flex-direction: column; align-items: center; position: relative; right: -100px; opacity: 0;}
#quest .quest_text p{text-align: center; padding: 40px 0 80px 0; font-size: 1.3em;}   
}











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

/* banner */
#banner{position: relative; width: 100%; height: 100px; top: 60px; background-image: url(../img/technology/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* accordion */
#accordion{position: relative; padding: 150px 0;}
#accordion .tech_title{text-align: center; padding-bottom: 100px;}
#accordion .tech_title h2{font-size: 1.5em; opacity: 0;}
#accordion .tech_title p{margin-top: 40px; font-size: 1em; opacity: 0;}
#accordion .con{height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition-duration: 0.5s;}
#accordion .con p{font-size: 1.15em; margin: 30px 0; color: #fff; transition-duration: 0.5s;}
#accordion .con .more_btn{border: 1px solid #fff; color: #fff;}
#accordion .con .more_btn:hover{color: #007FFD;}
#accordion .tech_con1{background-image: url(../img/technology/acco0w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con2{background-image: url(../img/technology/acco1w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con3{background-image: url(../img/technology/acco2w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con4{background-image: url(../img/technology/acco3w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con5{background-image: url(../img/technology/acco4w.jpg); background-position: center; background-size: cover;}

/* llama2 */
#llama2{position: relative; padding: 70px 0; background-image: url(../img/technology/llama.jpg); background-position: center; background-size: cover;}
#llama2 .la_text{width: 92%; margin: 0 auto;}
#llama2 .la_text p{width: 63%; font-size: 1em; padding: 20px 0 40px 0;}

/* social */
#social{position: relative; padding: 150px 0; width: 92%; margin: 0 auto;}
#social .so_text{padding-bottom: 80px; text-align: center; margin-top: -100px; opacity: 0;}
#social .cont{display: flex; justify-content: space-between; align-items: center; padding: 40px 0; border-top: 1px solid #808080; margin-top: -100px; opacity: 0;}
#social .cont p{font-size: 1.1em;}
#social .so_con3{border-bottom: 1px solid #808080;}

/* quest */
#quest{position: relative; padding: 100px 0 150px 0; width: 92%; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden;}
#quest .quest_img{width: 60%; padding-bottom: 40px; position: relative; left: -100px; opacity: 0;}
#quest .quest_img img{width: 100%;}
#quest .quest_text{width: 97%; display: flex; flex-direction: column; align-items: center; position: relative; right: -100px; opacity: 0;}
#quest .quest_text p{text-align: center; padding: 40px 0 80px 0; font-size: 1.3em;}   
}








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

/* banner */
#banner{position: relative; width: 100%; height: 60px; top: 40px; background-image: url(../img/technology/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* accordion */
#accordion{position: relative; padding: 100px 0;}
#accordion .tech_title{text-align: center; padding-bottom: 70px;}
#accordion .tech_title h2{font-size: 1.2em; width: 80%; margin: 0 auto; padding-bottom: 20px; opacity: 0;}
#accordion .tech_title p{margin-top: 40px; font-size: 1em; width: 92%; margin: 0 auto; opacity: 0;}
#accordion .con{height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition-duration: 0.5s;}
#accordion .con p{width: 80%; margin: 0 auto; font-size: 1.15em; margin: 30px 0; color: #fff; transition-duration: 0.5s;}
#accordion .con .more_btn{border: 1px solid #fff; color: #fff;}
#accordion .con .more_btn:hover{color: #007FFD;}
#accordion .tech_con1{background-image: url(../img/technology/acco0w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con2{background-image: url(../img/technology/acco1w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con3{background-image: url(../img/technology/acco2w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con4{background-image: url(../img/technology/acco3w.jpg); background-position: center; background-size: cover;}
#accordion .tech_con5{background-image: url(../img/technology/acco4w.jpg); background-position: center; background-size: cover;}

/* llama2 */
#llama2{position: relative; padding: 70px 0; background-image: url(../img/technology/llama.jpg); background-size: cover; display: flex; justify-content: center; align-items: center;}
#llama2 .la_text{width: 92%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#llama2 .la_text p{font-size: 1em; text-align: center; padding: 20px 0 40px 0;}

/* social */
#social{position: relative; padding: 100px 0; width: 92%; margin: 0 auto;}
#social .so_text{padding-bottom: 80px; text-align: center; margin-top: -100px; opacity: 0;}
#social .cont{display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 40px 0; border-top: 1px solid #808080; margin-top: -100px; opacity: 0;}
#social .cont p{text-align: center; font-size: 1em; padding-bottom: 40px;}
#social .so_con3{border-bottom: 1px solid #808080;}

/* quest */
#quest{position: relative; padding-bottom: 100px; width: 92%; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden;}
#quest .quest_img{width: 60%; padding-bottom: 40px; position: relative; left: -100px; opacity: 0;}
#quest .quest_img img{width: 100%;}
#quest .quest_text{width: 97%; display: flex; flex-direction: column; align-items: center; position: relative; right: -100px; opacity: 0;}
#quest .quest_text p{text-align: center; padding: 40px 0 80px 0; font-size: 1em;}   
}