/* 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/activity/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;}

/* active_tabs */
#active_tabs{position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 200px 0;}
#active_tabs .active_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#active_tabs .active_wrap h2{text-align: center; font-size: 3em; font-weight: 700; padding-bottom: 80px; opacity: 0;}
.wrap{padding:15px; letter-spacing:-0.5px; width: 100%; margin-top: -100px; opacity: 0;}
.tab_menu{position:relative; width: 100%;}
.tab_menu .list{overflow:hidden; display: flex; justify-content: space-between; background-color: #fff; border-radius: 10px;}
.tab_menu .list li{width: 32%; height: 80px; line-height: 80px; display: flex; align-items: center; justify-content: center;}
.tab_menu .list li.is_on .btn{font-size: 2em; font-weight:bold; color: #007FFD;}
.tab_menu .list .btn{font-size:1.5em; transition-duration: 0.5s;}
.tab_menu .cont_area{margin-top:20px;}
.tab_menu .cont_area .cont{display:none; background-color: #fff; width:100%; border-radius: 10px; overflow: hidden;}
.tab_menu .cont_area .cont_wrap{display: flex; justify-content: space-between; align-items: center;}
.tab_menu .cont_area .text_box{width: 48%; margin: 0 auto;}
.tab_menu .cont_area .text_box h3{font-size: 1.5em; font-weight: 700; text-align: center; margin-bottom: 80px;}
.tab_menu .cont_area .text_box p{font-size: 1.2em; text-align: center; margin-bottom: 10px;}
.tab_menu .cont_area .img_box{width: 48%;}
.tab_menu .cont_area .img_box img{width: 100%;}

.m_active_wrap{display: none;}


/* develop */
#develop{position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 150px;}
#develop .de_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#develop .de_wrap .de_text{padding-bottom: 200px; margin-top: -100px; opacity: 0;}
#develop .de_wrap .de_text h2{text-align: center; font-size: 3em; font-weight: 700; margin-bottom: 30px;}
#develop .de_wrap .de_text p{text-align: center; font-size: 1.5em;}
#develop .de_con .con{display: flex; justify-content: space-between; align-items: center; padding-bottom: 100px; opacity: 0;}
#develop .de_con .con_img{width: 43%;}
#develop .de_con .con_img img{width: 100%;}
#develop .de_con .con_text{width: 50%;}
#develop .de_con .con_text h3{font-size: 1.5em; font-weight: 700; text-align: center; margin-bottom: 50px;}
#develop .de_con .con_text p{font-size: 1.3em; text-align: center;}
}









/* 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/activity/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;}

/* active_tabs */
#active_tabs{position: relative; width: 92%; margin: 0 auto; padding: 150px 0;}
#active_tabs .active_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#active_tabs .active_wrap h2{text-align: center; font-size: 2.3em; font-weight: 700; padding-bottom: 80px;}
.wrap{padding:15px; letter-spacing:-0.5px; width: 100%;}
.tab_menu{position:relative; width: 100%;}
.tab_menu .list{overflow:hidden; display: flex; justify-content: space-between; background-color: #fff; border-radius: 10px;}
.tab_menu .list li{width: 32%; height: 80px; line-height: 80px; display: flex; align-items: center; justify-content: center;}
.tab_menu .list li.is_on .btn{font-size: 1.4em; font-weight:bold; color: #007FFD;}
.tab_menu .list .btn{font-size:1.2em; transition-duration: 0.5s;}
.tab_menu .cont_area{margin-top:20px;}
.tab_menu .cont_area .cont{display:none; background-color: #fff; width:100%; border-radius: 10px; overflow: hidden;}
.tab_menu .cont_area .cont_wrap{display: flex; justify-content: space-between; align-items: center;}
.tab_menu .cont_area .text_box{width: 48%; margin: 0 auto;}
.tab_menu .cont_area .text_box h3{font-size: 1.2em; font-weight: 700; text-align: center; margin-bottom: 80px;}
.tab_menu .cont_area .text_box p{font-size: 1em; text-align: center; margin-bottom: 10px;}
.tab_menu .cont_area .img_box{width: 48%;}
.tab_menu .cont_area .img_box img{width: 100%;}


.m_active_wrap{display: none;}



/* develop */
#develop{position: relative; width: 92%; margin: 0 auto; padding-bottom: 150px;}
#develop .de_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#develop .de_wrap .de_text{padding-bottom: 150px; margin-top: -100px; opacity: 0;}
#develop .de_wrap .de_text h2{text-align: center; font-size: 2.3em; font-weight: 700; margin-bottom: 30px;}
#develop .de_wrap .de_text p{text-align: center; font-size: 1.2em;}
#develop .de_con .con{display: flex; justify-content: space-between; align-items: center; padding-bottom: 100px; opacity: 0;}
#develop .de_con .con_img{width: 43%;}
#develop .de_con .con_img img{width: 100%;}
#develop .de_con .con_text{width: 50%;}
#develop .de_con .con_text h3{font-size: 1.5em; font-weight: 700; text-align: center; margin-bottom: 50px;}
#develop .de_con .con_text p{font-size: 1.3em; text-align: center;}
}








/* 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/activity/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;}

/* active_tabs */
#active_tabs{position: relative; width: 92%; margin: 0 auto; padding: 150px 0;}
#active_tabs .active_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#active_tabs .active_wrap h2{text-align: center; font-size: 1.5em; font-weight: 700; padding-bottom: 80px;}
.wrap{padding:15px; letter-spacing:-0.5px; width: 100%;}
.tab_menu{position:relative; width: 100%;}
.tab_menu .list{overflow:hidden; display: flex; justify-content: space-between; background-color: #fff; border-radius: 10px;}
.tab_menu .list li{width: 32%; height: 80px; line-height: 80px; display: flex; align-items: center; justify-content: center;}
.tab_menu .list li.is_on .btn{font-size: 1.1em; font-weight:bold; color: #007FFD;}
.tab_menu .list .btn{font-size:1em; transition-duration: 0.5s;}
.tab_menu .cont_area{margin-top:20px;}
.tab_menu .cont_area .cont{display:none; background-color: #fff; width:100%; border-radius: 10px; overflow: hidden;}
.tab_menu .cont_area .cont_wrap{display: flex; justify-content: space-between; align-items: center;}
.tab_menu .cont_area .text_box{width: 48%; margin: 0 auto;}
.tab_menu .cont_area .text_box h3{font-size: 1em; font-weight: 700; text-align: center; margin-bottom: 30px;}
.tab_menu .cont_area .text_box p{font-size: 1em; text-align: center; margin-bottom: 10px;}
.tab_menu .cont_area .img_box{width: 48%;}
.tab_menu .cont_area .img_box img{width: 100%;}



.m_active_wrap{display: none;}



/* develop */
#develop{position: relative; width: 92%; margin: 0 auto; padding-bottom: 50px;}
#develop .de_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#develop .de_wrap .de_text{padding-bottom: 150px; margin-top: -100px; opacity: 0;}
#develop .de_wrap .de_text h2{text-align: center; font-size: 2.3em; font-weight: 700; margin-bottom: 30px;}
#develop .de_wrap .de_text p{text-align: center; font-size: 1.2em;}
#develop .de_con .con{display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 100px; opacity: 0;}
#develop .de_con .con:first-child img{margin-bottom: 20px;}
#develop .de_con .con:last-child img{margin-top: 20px;}
#develop .de_con .con_img img{width: 100%;}
#develop .de_con .con_text h3{font-size: 1.3em; font-weight: 700; text-align: center; margin-bottom: 30px;}
#develop .de_con .con_text p{font-size: 1em; text-align: center;}
}






/* 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/activity/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;}

/* active_tabs */
#active_tabs{position: relative; width: 92%; margin: 0 auto; padding: 100px 0;}
#active_tabs .active_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#active_tabs .active_wrap h2{text-align: center; font-size: 1.15em; font-weight: 700; padding-bottom: 40px;}
.wrap{display: none;}


.m_active_wrap{position: relative; width: 92%; margin: 0 auto;}
.m_active_wrap .accordion{position: relative;}
.m_active_wrap .accordion li{margin-bottom: 10px; background-color: #fff; border-radius: 10px; overflow: hidden;}
.m_active_wrap .accordion li h2{background-color: #fff; padding: 30px; font-size: 1.2em; font-weight: 700; border-radius: 10px; line-height: 1.6em; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s;}
.m_active_wrap .accordion li h2 img{transition-duration: 0.5s;}
.m_active_wrap .accordion li.select h2 img{transform: rotate(180deg);}
.m_active_wrap .accordion li .acco_con{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); font-size: 1em; line-height: 1.6em; border-radius: 10px; display: none;}
.m_active_wrap .accordion li .acco_con h3{color: #fff; font-size: 1em; padding-bottom: 20px;}
.m_active_wrap .accordion li .acco_con p{color: #fff; font-size: 1em; padding-bottom: 20px;}
.m_active_wrap .accordion li .acco_con img{width: 100%;}




/* develop */
#develop{position: relative; width: 92%; margin: 0 auto;}
#develop .de_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#develop .de_wrap .de_text{padding-bottom: 100px; margin-top: -100px; opacity: 0;}
#develop .de_wrap .de_text h2{text-align: center; font-size: 1.3em; font-weight: 700; margin-bottom: 30px;}
#develop .de_wrap .de_text p{text-align: center; font-size: 1.2em; width: 78%; margin: 0 auto;}
#develop .de_con .con{display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 100px; opacity: 0;}
#develop .de_con .con:first-child img{margin-bottom: 20px;}
#develop .de_con .con:last-child img{margin-top: 20px;}
#develop .de_con .con_img img{width: 100%;}
#develop .de_con .con_text h3{font-size: 1.3em; font-weight: 700; text-align: center; margin-bottom: 30px;}
#develop .de_con .con_text p{font-size: 1em; text-align: center;}
}