@media screen and (max-width:720px) {
    .show_720 {display: block;}
    .hide_720 {display: none;}
	
    
    /**** 공통 ****/
    .container {width:100%; padding: 0 30px;}
    body {min-width: 100%;}
    body.open_menu {overflow: hidden; height: 100%;}
    .pad_t_100 {padding-top: 10%;}
    .pad_b_100 {padding-bottom: 10%;}
    .pad_t_150 {padding-top: 15%;}
    .pad_b_150 {padding-bottom: 15%;}
    .mar_b_50 {margin-bottom: 5%}
    .mar_b_100 {margin-bottom: 10%}
    .mar_t_100 {margin-top: 10%}
    .mar_t_150 {margin-top: 15%}
    .section_title {font-size: 26px; line-height: 34px;}
    .section_title p {font-size: 16px; line-height: 30px;}
    .section_title .sub {font-size: 18px; line-height: 18px; padding: 10px 15px; margin-top: 10px;}
    
    .table_type_1 th, .table_type_1 td {display: block; text-align: left; padding: 15px 0; font-size: 16px; line-height: 26px;}
    .table_type_1 th {padding-bottom: 0;}
    
    .table_type_2 {margin-top: 20px;}
    .table_type_2 th, .table_type_2 td {height: 50px; font-size: 16px; line-height: 16px;}
    
    .info_box {padding: 15px; max-height: 230px;}
    .info_box .list h4 {font-size: 16px;}
    
    /*모바일 헤더*/
    #mobile_header {z-index: 100; text-align: center; height: 75px}
    #mobile_header .logo {top: 20px; left: 30px; position: absolute; margin: 0;}
    #mobile_header .logo img {width: 100px;}
    
    .mobile_btn {box-sizing: content-box; position: absolute; z-index: 31; display: block; right: 30px; top: 23px; width: 22px; height: 18px; padding: 6px; -webkit-transition: all .3s ease; transition: all .3s ease;}
	.mobile_btn .bar, .mobile_btn .bar:before, .mobile_btn .bar:after {content: ''; position: absolute; right: 6px; height: 2px; width: 100%; background-color: white; opacity: 1; text-indent: -9999em;}
	.mobile_btn .bar {top: 14px; width: 16px; -webkit-transition: height .3s .3s; transition: height .3s .3s;}
	.mobile_btn .bar:before {top: -8px; right: 0; width: 22px; -webkit-transition: top .3s .3s, transform .3s, width .3s .3s; 	transition: top .3s .3s, transform .3s, width .3s .3s;}
	.mobile_btn .bar:after {top: 8px; right: 0; width: 22px; -webkit-transition: top .3s .3s, transform .3s, width .3s .3s; 	transition: top .3s .3s, transform .3s, width .3s .3s;}

	.open_menu .mobile_btn .bar {height: 0; background-color: rgba(255,255,255,1); -webkit-transition: height .3s; transition: height .3s;}
	.open_menu .mobile_btn .bar:before {top: 0; width: 22px; background-color: rgba(255,255,255,1); -webkit-transform: rotate3d(0,0,1,45deg); -ms-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); -webkit-transition: top .3s, transform .3s .3s, width .3s; transition: top .3s, transform .3s .3s, width .3s;}
	.open_menu .mobile_btn .bar:after {top: 0; width: 22px; background-color: rgba(255,255,255,1); -webkit-transform: rotate3d(0,0,1,-45deg); -ms-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); -webkit-transition: top .3s, transform .3s .3s, width .3s; transition: top .3s, transform .3s .3s, width .3s;}

    /*모바일 메뉴*/
    #mobile_menu_wrap {position: fixed; display: block; z-index: 30; left: 100%; right: 0; top: 0; height: 100%; background-color: #010b0d; overflow: hidden; color: #fff; -webkit-transition: left .3s; transition: left .3s;}
    .open_menu #mobile_menu_wrap {left: 0;}
    #mobile_menu_wrap .menu {position: absolute; right: 0; width: 100vw; height: 100%;}
    #mobile_menu_wrap .menu .m_gnb {text-align: center;}
    #mobile_menu_wrap .menu .m_gnb li {margin-bottom: 30%;}
    #mobile_menu_wrap .menu .m_gnb li:last-child {margin-bottom: 0;}
    #mobile_menu_wrap .menu .m_gnb li a {font-size: 30px; color: white; display: block; font-family: 'Poppins', sans-serif; font-weight: 700;}
    #mobile_menu_wrap .menu .m_gnb li:hover a {color: #ffd200;}
    
    
    /**** section_1 ****/
    #section_1 {margin-top: 75px;}
    
    /**** section_2 ****/
    #section_2 .section_title {margin-top: 50%;}
    #section_2 .text_box {padding: 30px;}
    #section_2 .text_box p {font-size: 16px; line-height: 30px;}
    
    /**** section_3 ****/
    #section_3 .text_box {width: 100%; padding: 0 30px;}
    #section_3 .text_box img {width: 70%;}
    #section_3 .text_box p {font-size: 16px; line-height: 30px;}
    
    /**** section_4 ****/
	#section_4 {height: 100%;}
    #section_4 .tabs {overflow: hidden;}
    #section_4 .tabs li {float: left; width: 23%; margin: 0 1%; font-size: 14px; line-height: 40px; padding: 0 10px;}
    #section_4 .chapter_slide_wrap {height: auto;}
	#section_4 .swiper-slide {height: 0; padding-bottom: 100%;}
    #section_4 .chapter_slide_wrap .chapt_name {width: 40%; left: 5%;}
    #section_4 .character {bottom: 163px; padding: 0;}
    #section_4 .character .left {width: 30%; left: 5%;}
    #section_4 .character .right {width: 30%; right: 5%;}
    #section_4 .talk_box {height: 165px;}
    #section_4 .talk_box .arrow {width: 50px; }
    #section_4 .talk_box .arrow.right, #section_4 .talk_box .arrow.left {    background-size: contain;}
    #section_4 .talk_box .talk {width: calc(100% - 100px); padding: 30px 5%;}
    #section_4 .talk_box .talk .name {font-size: 18px; line-height: 18px; padding-bottom: 0; border-bottom: 0;}
    #section_4 .talk_box .talk .box {height: 95px;}
    #section_4 .talk_box .talk p {font-size: 14px; line-height: 24px; margin-top: 15px;}
    #section_4 .swiper-button-next, #section_4 .swiper-button-prev {width: 30px; height: 24px; background-size: 30px; bottom: 70px;}
    #section_4 .swiper-button-prev {left: 10px;}
    #section_4 .swiper-button-next {right: 10px;}
    
    /**** section_5 ****/
    #section_5 .swiper-button-next, #section_5 .swiper-button-prev {width: 50px; height: 50px; background-size: 50px;}
    
    
    /**** section_6 ****/
    #section_6:before, #section_6:after {background-size: 40%;}
    
    
    /**** section_8 ****/
    #section_8 h2 {font-size: 30px; line-height: 30px;}
    #section_8 .info {margin-bottom: 50px;}
    #section_8 .info h3 {font-size: 18px; line-height: 18px;}
    #section_8 .info p {font-size: 16px; line-height: 26px; margin-top: 15px;}
    
    
    /**** section_9 ****/
    #section_9 .swiper-slide .box {padding: 25px;}
    #section_9 .swiper-slide .title p {font-size: 14px; line-height: 24px;}
    #section_9 .swiper-slide .title h3 {font-size: 22px; line-height: 30px;}
    #section_9 .swiper-slide .img {float: none;}
    #section_9 .swiper-slide .text {float: none; width: 100%; padding: 0; margin-top: 30px;}
    #section_9 .swiper-slide .text h4 {font-size: 16px; line-height: 26px; margin-bottom: 20px;}
    #section_9 .swiper-slide .text p {font-size: 16px; line-height: 26px;}
    
    #section_9 .poster_box img {float: none;}
    #section_9 .poster_box .text {float: none; width: 100%; padding: 25px; margin-top: 30px;}
    #section_9 .poster_box .text p {font-size: 16px; line-height: 30px;}
    
    /**** section_10 ****/
    #section_10 .logo_part {float: none; text-align: center; margin-top: 20px;}
    #section_10 .logo_part img {max-width: 60%;}
    #section_10 .logo_part p {font-size: 16px; line-height: 16px; margin-top: 20px;}
    #section_10 .info_part {float: none; margin-left: 0; margin-top: 30px;}
    #section_10 .info_part .info h3 {display: block; text-align: center; margin-bottom: 20px; font-size: 18px;}
    #section_10 .info_part .info p {font-size: 16px; line-height: 16px;}
    #section_10 .info_part .info img {margin-left: 0; vertical-align: middle;}
    
    /**** footer ****/
    footer {text-align: center;}
    footer h3 {font-size: 18px; line-height: 28px;}
    footer .info p {font-size: 14px; line-height: 28px;}
    footer .info .copy {font-size: 12px;}
    
    
    
    
}