@charset "utf-8";

.inner{max-width: 1250px; margin: auto;}
.inner h2{font-size: 47px; color:#000; font-weight: 800; line-height: 1.2em; margin-bottom: 30px}
.inner p.add_txt{font-size: 21px; color:#000; line-height: 1.5em; font-weight: 500;}
.inner h2 span, .inner p.add_txt span{display: block;}
#header>.inner {width: 100%}

.visu{position: relative; width: 100vw; height: 70vh;}
.visu h1{position: absolute; top: 20%; left: 50%;  transform: translate(-50%, -50%); width: 300px; height: 178px; background: url('../images/futurebook5g/visual_logo.svg') no-repeat 50% 50% ; font-size:0; background-size: cover; z-index: 5}

.intro {width: 100%; height: 70vh;  padding-top: 150px; background:url('../images/futurebook5g/intro_bg.png')no-repeat 30% 50%; background-size: cover}
.intro h2{width: 575px; height: 90px; background: url('../images/futurebook5g/intro_logo.png') no-repeat 50% 50%; background-size: contain; margin: auto; padding-top: 90px; text-align: center;}
.intro h2 p{margin-top: 30px;}
.intro h2 p strong{color: #005bac; font-weight: 700;}
.intro .cont{display: flex; max-width: 800px; justify-content: space-between; margin: 110px auto 90px;}
.intro .cont .penta{width: 32%; height: 302px; color:#FFF; font-size: 22px; text-align: center;  background-size: contain !important; background-repeat: no-repeat !important;}
.intro .cont .penta h3{position: relative; color:#FFF; font-size: 31px; padding: 92px 62px 22px; text-indent: 46px; line-height: 1.2; font-weight: 800;} 
.intro .cont .penta h3 .kockoc{position:absolute; top: 37px; left: 76px; width: 56px; height: 90px; background:url("../images/futurebook5g/intro_kockoc.svg") no-repeat 0 0; font-size:0;}
.intro .cont .box01{background: url('../images/futurebook5g/intro_penta_box01.png') no-repeat center center} 
.intro .cont .box02{background: url('../images/futurebook5g/intro_penta_box02.png') no-repeat center center}
.intro .cont .box03{background: url('../images/futurebook5g/intro_penta_box03.png') no-repeat center center}
.intro .cont .view{position: relative; font-size: 17px; background: url('../images/futurebook5g/intro_penta_box01.png')}
.intro .cont .view::before{content:""; display:block; position:absolute; top: 27px; left:50%; transform: translate(-50%, -50%); width: 27px; height: 12px; background:url("../images/futurebook5g/icon_arrow.svg") no-repeat 50% 50%; background-size: contain}
.intro .cont .on {color: #fff}
.intro .cont .on,
.intro .cont a:hover h3, .intro .cont a:hover .view{display: none; transition: all 0.3s;}
.intro .cont a:hover .on{width: inherit; height: inherit; display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; font-size: 21px; line-height:1.4; color:#FFf; transition: all 0.3s; }
.intro .cont .on span{display: block;}
.intro .cont .box01 .point{color: #6ec2ee}
.intro .cont .box02 .point{color: #005bac}
.intro .cont .box03 .point{color: #fcc000}
.intro .slide_paging{display: none;}
.intro .inner {position: relative}
.intro .futurebook_cha {position: absolute; right: -3vw; bottom: -5vh}
.intro .futurebook_cha img {width: 100%}
.intro .inner p.add_txt {font-size: 26px}

.app {width: 100%; height: 60vh;}
.app h2 p{margin-top: 20px;}
.app .bg{width: inherit; height: inherit;}
.app .cont01{background:#effaff;}
.app .cont02{background:#fff url('../images/futurebook5g/app_bg02.png')no-repeat 50% 50%; background-size: cover}
.app .txtbox{width: 55%; display: flex; flex-direction: column; justify-content: center}
.app .on{display: block;}
.app .txt_img_wrap {display: flex; height: 60vh; align-items: center; justify-content: space-between}

.feature{width: 100%; padding: 150px 0px; text-align: center; }
.feature .cont{position: relative; width: 100%; height: 55vh; border-radius: 30px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); margin-top: 50px; padding: 50px;} 
.feature .cont::after{content:"";  display:block; position:absolute; top: 0; left:0; width: 30%; height: 55vh; background: #e2f0fb; border-top-left-radius: 30px; border-bottom-left-radius: 30px; z-index: -1;}
.feature .topic{display:flex; align-items: center; width: 100%; height: 100%;}
.feature .topic li{color:#000; }
.feature .topic a.title{position: relative; display:flex; flex-flow: column;  justify-content: center;  background: #FFF; width: 410px; height: 11vh; border-radius: 90px; padding-left: 50px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); font-size: 23px; text-align: left; font-weight: 500; line-height: 1.4;margin: 25px 0; }
.feature .cate{width: 45vw;}
.feature .cate li{position: relative; display: flex; justify-content: space-between; align-content: center; line-height: 1.5em; font-size: 23px; text-align: left;}
.feature .cate li em.point{color: #189ed8;}
.feature .cate li .img_box{width: auto; height: 15vh; margin:0 20px 0 30px; display: flex; align-items: center}
.feature .cate li .img_box img {width: 100%}
.feature .cate li .txt_box{height: 15vh; display: flex; flex-direction: column; justify-content: center; flex: 1; font-size: 20px}
.feature .cate li .txt_box strong{font-weight: 800; font-size: 25px}
 
.feature .cate li:first-child{margin-top: 0;}
.feature .feature02{margin-left: 50px}
.feature .feature02 li .img_box{content:""; display:block; border-radius: 50%; width: 90px; height: 90px; margin: 0 50px 0 30px; background-size: 54px 54px !important;}
.feature .feature02 li .txt_box{height: 10vh}

.feature .feature02 .no01 .img_box{background:#66bbe6 url('../images/futurebook5g/feature02_icon01.png') no-repeat 50% 50%;}
.feature .feature02 .no02 .img_box{background:#f09124 url('../images/futurebook5g/feature02_icon02.png') no-repeat 50% 50%;}
.feature .feature02 .no03 .img_box{background:#7db663 url('../images/futurebook5g/feature02_icon03.png') no-repeat 50% 50%;}
.feature .feature02 .no04 .img_box{background:#ee86b5 url('../images/futurebook5g/feature02_icon04.png') no-repeat 50% 50%;}
.feature .feature02 .no05 .img_box{background:#9d77b1 url('../images/futurebook5g/feature02_icon05.png') no-repeat 50% 50%;}

.feature .feature03 li .img_box{margin: 0 40px 0 30px;}

.feature .topic .ui-tabs-active a.title{color:#FFF; background:#005bac;}
.feature .topic .ui-tabs-active a.title::before{content:""; display:block; position:absolute; top:50%; right: 60px; transform: translate(20%, -50%); width:50px; height:24px; background: url('../images/futurebook5g/icon_arrow.svg') no-repeat center right; background-size : contain; }
.feature .topic .title span, .feature .cate li span,
.feature .topic li.on .cate{display: block}
.feature.inner p.add_txt {margin-top: -15px}

.youtube{width: 100%; text-align: center; padding: 30px 0 150px;}
.youtube.inner h2{margin-bottom: 50px}
.youtube .video_wrap{width: 100%; margin: 30px auto -30px;}
.youtube .video_wrap ul{display: flex; justify-content: space-between; flex-wrap: wrap; align-content: stretch}
.youtube .video_wrap li{width: 32%; padding-bottom: 30px;}
.youtube .videoWrapper {position: relative; padding-bottom: 48%; padding-top: 25px; height: 0;}
.youtube .videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.youtube .video_wrap .video_box a{display: block; content: ""} 
.youtube .video_wrap .video_box img {width: 100%; overflow: hidden; border-radius: 15px}

.youtube .video_wrap .youtube_title {display: flex; align-items: center; justify-content: center; margin-top: 20px}
.youtube .video_wrap .youtube_title .play_ico {width: 30px; height: 20px; opacity: 0.5}
.youtube .video_wrap .youtube_title .play_ico img {width: 100%; border-radius: 0}
.youtube .video_wrap .youtube_title .tit_name {margin-left: 10px;}


.step{position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between}
.step .inner h2{color:#FFF;  text-transform: uppercase;}
.step .inner .add_txt{color:#FFF; margin-top: -20px}
.step .box{width: 100%; height: 1010px; text-align: center; padding-top: 80px;}
.step .box.on{display: block}
 	.book_detatil{width: 30%; display: flex; flex-flow: column; justify-content: end; align-items: center; margin-bottom: 60px}
	.book_detatil .logo{width: 135px; height: 85px;}
	.book_detatil mark{display:block; width: 120px; height: 48px; line-height: 48px; border-radius:30px; font-size: 26px;  color:#FFF; margin: 20px 0;}
	.book_detatil .lala{font-size: 24px;  color:#FFF; text-align: center; line-height: 1.4;}
	.book_detatil .lala span{display: block; }
.level01{background: #2164ac}
.level01::before{content:""; display:block; position:absolute; top:0; right: 0; width: 50%; height: inherit; background: rgba(255, 255, 255, 0.1);}
.level01 .book_detatil .logo{background:url('../images/futurebook5g/step_logo01.png') no-repeat 50% 50%; background-size: contain !important;}
.level01 .book_detatil mark{ background:#3a84d2;}

.level02{background: #0485bc}
.level02::before{content:""; display:block; position:absolute; top:0; right: 0; width: 50%; height: inherit; background: rgba(255, 255, 255, 0.1);}
.level02 .book_detatil .logo{background:url('../images/futurebook5g/step_logo02.png') no-repeat 50% 50%; background-size: contain !important;}
.level02 .book_detatil mark{background:#0d9dda;}

.level03{background: #29b1f2}
.level03::before{content:""; display:block; position:absolute; top:0; right: 0; width: 50%; height: inherit; background: rgba(255, 255, 255, 0.1);}
.level03 .book_detatil .logo{background:url('../images/futurebook5g/step_logo03.png') no-repeat 50% 50%; background-size: contain !important;}
.level03 .book_detatil mark{ background:#5fbdeb;}

.level04{background: #ffc807}
.level04::before{content:""; display:block; position:absolute; top:0; right: 0; width: 50%; height: inherit; background: rgba(255, 255, 255, 0.1);}
.level04 .book_detatil .logo{background:url('../images/futurebook5g/step_logo04.png') no-repeat 50% 50%;}
.level04 .book_detatil mark{background:#ffa200;}
.step .book_wrap {display: flex; margin: -90px auto 0; z-index: 10; align-items: flex-end; justify-content: space-between}
.step .book_thumb {text-align: left; flex: 1; z-index: 1}
.step .book_thumb img {width: 100%}
 
.step .bx-wrapper {margin: 0}
.step .slide .slide_paging{position: absolute; top: 40%; left: 50%; display: block; width: 1300px; margin-left: -650px}
.step .slide_paging .inner{ width: 100%; }
.step .slide_paging a{position: absolute; display: block; width: 36px; height: 62px; background: url('../images/futurebook5g/icon_paging.svg') no-repeat 50% 50%;}
.step .slide_paging a.prev{left: -50px;}
.step .slide_paging a.next{ transform: scaleX(-1); right: -50px; }
.step_navi{position: absolute; left: 50%; bottom: 80px; transform: translate(-50%, 0); z-index: 10}
.step_navi ul{display: flex; justify-content: center;}
.step_navi ul::before{content:""; display:block; position:absolute; left:10%; top:40%; width: 80%; height:1px; border: 1px dashed #FFF; z-index: -1;}
.step_navi li{width: 210px; height: 250px; font-size:0;}
.step_navi li a{display: block; width: 100%; height: 100%;}
.step_navi li a.active{}
.step_navi li a:hover{}
.step_navi li.step_menu01 a{background:url('../images/futurebook5g/step_img01.png') no-repeat 50% 50%;}
.step_navi li.step_menu02 a{background:url('../images/futurebook5g/step_img02.png') no-repeat 50% 50%;}
.step_navi li.step_menu03 a{background:url('../images/futurebook5g/step_img03.png') no-repeat 50% 50%;}
.step_navi li.step_menu04 a{width:250px; background:url('../images/futurebook5g/step_img04.png') no-repeat 50% 50%;}
.step_navi li.step_menu04 {margin-left: 20px}

.habit{width: 100%; background:url('../images/futurebook5g/habit_bg.png') no-repeat 90% 46%; padding: 150px 0; background-size: 45%}
.habit .btn_view{position:relative; display: block; width: 195px; height: 50px; line-height: 50px; border-radius: 30px; border: 1px solid #000; font-size: 21px; font-weight: 700; padding-left: 38px; margin-top: 48px;}
.habit .btn_view::before{content:""; display:block; position:absolute; right: 16px; top:19px; width: 23px; height: 11px; background: url('../images/futurebook5g/icon_arrow.svg') no-repeat 50% 50%; filter: invert(100%)}

.videoBox{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.videoBox:before {content: ""; position:absolute; left: 0; right: 0; top:0; bottom: 0; background:rgba(0,0,0.7);opacity: 0.2; z-index: 1}
.videoBox video {min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

/* 샤퍼이미지 */
.sharper_image img {width: 100%}
.sharper_image h2, .sharper_image p, .sharper_image span, .sharper_image div {font-family: 'Spoqa Han Sans Neo', 'sans-serif'; color: #222}
.sharper_image .w_wrap {width: 770px; margin: auto;}

.sh_visual {width: 100%; height: 850px; background: url('../images/sharper_image/visual.jpg') no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: flex-start}
.sh_visual .logo {width: 50%; text-align: center}
.sh_visual .logo img {width: 340px !important;}
.sh_intro {width: 100%; height: 810px; background: url('../images/sharper_image/bg_intro.jpg') no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center;}
.sh_intro h1 {width: 475px; margin: 40px auto 50px;}
.sh_intro .nm_kr {font-size: 18px; letter-spacing: 10px; font-weight: 600}
.sh_intro p {font-size: 20px; margin-top: 30px; text-align: center;}
.sh_intro .intro_logo {width: 270px; text-align: center; margin: auto}

.sh_goods_list {width: 100%; padding: 80px 0 150px; text-align: center}
.sh_goods_list.rc {background: #fee800 url('../images/sharper_image/bg_lineup_rc.jpg') no-repeat top center; background-size: 100%}
.sh_goods_list.lasergun {background: #1a1a1a url('../images/sharper_image/bg_lineup_lasergun.jpg') no-repeat top center; background-size: 100%;}
.sh_goods_list.lasergun h2, .sh_goods_list.lasergun p, .sh_goods_list.lasergun span {color: #fff}
.sh_goods_list .goods_list {display: flex; align-items: center; flex-wrap: wrap; margin-top: 70px}
.sh_goods_list .goods_list li {flex: 1 1 50%;}
.sh_goods_list .goods_list li .thumb {margin: 0 20px 10px}
.sh_goods_list .goods_list li span {font-size: 20px}
.sh_goods_list .goods_list li img {border-radius: 20px}
.sh_goods_list .goods_list li:nth-child(-n+2) {margin-bottom: 50px}

.sh_goods_list .tab {display: flex; align-items: center; flex-wrap: wrap; margin: 0 auto 70px; text-align: center; width: 50%; background-color: #fff; border: 2px solid #000; border-radius: 15px}
.sh_goods_list .tab .tab_rc, .sh_goods_list .tab .tab_lasergun {flex: 1 1 50%; padding: 15px 0; font-size: 20px; font-weight: 600;}
.sh_goods_list .tab .tab_rc.on {background-color: #000; color: #fff; border-radius: 13px 0 0 13px}
.sh_goods_list .tab .tab_lasergun.on {background-color: #000; color: #fff; border-radius: 0 13px 13px 0}

.sh_goods_list h2 {font-size: 45px; margin-bottom: 25px}
.sh_goods_list p {font-size: 25px;}

.sh_youtube {margin: 150px 0}


/* 애니메이션 */
section.on [class*="fade_in"] {opacity: 0;}	
section .fade_in_up, section .fade_in_left, section .fade_in_right {opacity: 0}

section.on .fade_in_up{
	animation-name: fadeInUp;
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:0;
}

section.on .fade_in_up:nth-child(1){animation-delay:0}
section.on .fade_in_up:nth-child(2){animation-delay:0.3s}
section.on .fade_in_up:nth-child(3){animation-delay:0.6s}
section.on .fade_in_up:nth-child(4){animation-delay:0.9s}
section.on .fade_in_up:nth-child(5){animation-delay:1.2s}
section.on .fade_in_up:nth-child(6){animation-delay:1.5s}
section.on .fade_in_up:nth-child(7){animation-delay:1.8s}
section.on .fade_in_up:nth-child(8){animation-delay:2.1s}
section.on .fade_in_up:nth-child(9){animation-delay:2.4s}
section.on .fade_in_up:nth-child(10){animation-delay:2.6s}


section.on .fade_in_left{
	animation-name: fadeInLeft;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}

section.on .fade_in_left:nth-child(1){animation-delay: 0}
section.on .fade_in_left:nth-child(2){animation-delay: 1s}
section.on .fade_in_left:nth-child(3){animation-delay: 2s}
section.on .fade_in_left:nth-child(4){animation-delay: 3s}

section.on .fade_in_right{
	animation-name: fadeInRight;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}	

 
	@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

	
/* 미디어쿼리 */

@media screen and (max-width: 1410px) {
	.step .slide .slide_paging {width: 1100px; margin-left: -550px}
	}

@media screen and (max-width: 1280px) {
	.inner{max-width: 1000px;}
	.inner h2{font-size: 40px;}
	.inner p.add_txt{font-size: 18px;}
	
	.intro{height: 640px; padding-top: 100px;}
	.intro h2{width: 350px; height: 60px;}
	.intro h2 p {margin-top: 0;}
	.intro .cont{max-width: 700px; margin: 92px auto;}
	.intro .cont .penta {height: 250px}
	.intro .cont .penta h3{font-size: 26px; padding: 80px 62px 22px; text-indent: 46px;} 
	.intro .cont .penta h3 .kockoc{top: 34px; left: 64px; width: 48px; height: 77px;}
	.intro .cont .view{font-size: 14px;}
	.intro .cont .view::before{font-size: 14px;}
	.intro .cont a:hover .on{font-size: 18px;}
	.intro .futurebook_cha {width: 20%}
	
	.app{height: 533px;}
	.app .txtbox {width: 90%;}
	.app .txt_img_wrap {height: 533px}
	.app .txt_img_wrap .app_img {width: 100%; height: 80%; text-align: center}
	.app .txt_img_wrap .app_img img {height: 100%}
		
	.feature{padding: 100px 0px 115px;}
	.feature .cont {padding: 30px}
	.feature .topic a.title{width: 350px; height: 10vh; padding-left: 54px; font-size: 20px; line-height: 1.2 }
	.feature .topic .on a.title::before{right: 40px; width: 40px; height: 14px;}
	.feature .cate li .txt_box strong {font-size: 23px; line-height: 1.6em}
	.feature .cate li .txt_box{font-size: 18px; line-height: 1.3em}
	
	
	.feature .cate li .img_box {margin: 0; margin-right: 10px;}
	.feature .feature02 {margin-left: 0}
	.feature .feature02 li .img_box {margin-right: 30px}
	.feature .feature02 li .txt_box {height: 9vh}
	.feature .feature02 .cate li {padding-left: 30px}

	.step .box{height: 850px;}
	.step .slide .slide_paging{width: 1000px; margin-left: -500px}
	.step .slide_paging a{width: 26px;}
	.step .book_wrap {margin: auto}
	.book_detatil {margin-bottom: 20px}
	.book_detatil mark{width: 100px; height: 40px; line-height: 40px; font-size: 22px;}
	.book_detatil .lala{font-size: 22px; line-height: 1.2;}
	.step .book_thumb img {width: 75%}
	
	.habit .btn_view{width: 160px; height: 40px; line-height: 40px;font-size: 18px; padding-left: 20px; margin-top: 35px;}
	.habit .btn_view::before{top: 13px;}

}

@media screen and (max-width: 1024px) {
	.inner{max-width: 100%;}
	.inner h2{font-size: 40px; font-weight: 800; line-height: 1.2;}
	.inner p.add_txt{font-size: 23px; font-weight: 500;}

	.visu h1{width: 357px; height: 220px;}

	.intro{width: 100%; height: 2620px; background:#f7f7f7 url('../images/futurebook5g/intro_m_bg.jpg') no-repeat; }
	.intro h2{width: 670px; height: 110px; margin: 0 auto}
	.intro h2 p{font-size: 34px; margin-top: 37px;}
	.intro .cont{position: relative; flex-direction: column; align-items: center; justify-content: center;  margin: 0px auto;}
	.intro .cont .penta{width: 395px; height: 435px; display: flex; flex-flow: column; align-items: center; justify-content: center; cursor: not-allowed; pointer-events: none;}
	.intro .cont .penta h3{width: 80%; font-size: 45px; padding: 0 60px 0; text-indent: 105px;}
	.intro .cont .penta h3 .kockoc{position:absolute; top: -85px; left: 76px; width: 95px; height: 145px;}
	.intro .cont .view{display: none;}
	.intro .cont .on{display: block; font-size: 23px; margin-top: 15px;  line-height: 1.2;;}
	.intro .slide_paging{display: block; }
	.intro .slide_paging a{display: block; position: absolute;  top: 35%; width: 38px; height: 68px; background: url('../images/futurebook5g/icon_paging.svg') no-repeat 50% 50%;filter: invert(35%);}
	.intro .slide_paging .prev{left: 50px; }
	.intro .slide_paging .next{ transform: scaleX(-1); right: 50px; }
	.intro .futurebook_cha {width: 300px; right: 20px !important;  bottom: 40px}
	.intro .inner{display: flex; flex-direction: column; justify-content: space-between;  height: 2500px;}
	.intro .cont .penta {margin: 0 auto 50px}
	
	.app{height: 800px;}
	.app .cont02{background-position: 100% 100%; background-size: 100%}
	.app .txtbox {width: 100%; margin-right: 0; text-align: center; padding-top: 100px;}
	.app .txt_img_wrap {flex-direction: column;}
	
	.feature {padding: 100px 0 0}
	.feature .cont{width: 100%; height: 100%; box-shadow: none; padding: 0;}
	.feature .cont::after{display: none;}
	.feature .topic{flex-direction: column}
	.feature .topic .ui-tabs-nav {display: flex; justify-content: space-between; width: calc(100vw - 80px)}
	.feature .topic a.title{width: 30vw; height: 8vh; font-size: 22px;}
	.feature .topic .on a.title::before{display: none;}
	.feature .cate{width: calc(100vw - 80px); border-radius: 30px; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.05);  padding: 40px;}
	.feature .cate li{width: 100%; font-size: 28px;}
	.feature .cate li strong{display: block; font-size: 35px; font-weight: 800;}
	.feature .cate li .img_box {width: 25vw; height: auto; margin-right: 40px}
	.feature .cate li .txt_box {font-size: 23px; height: auto}
	.feature .cate li .txt_box strong {font-size: 30px; line-height: 1.2em; margin-bottom: 15px}
	.feature .feature02 li .img_box {width: 10vw; height: 10vw; margin: 0 40px 20px 0}
	.feature .topic .ui-tabs-active a.title::before {display: none}
	.feature .topic a.title {padding-left: 35px; margin: 0 0 50px;}
	

	.youtube {padding: 100px 30px;}
	.youtube .video_wrap li {width: 48.5%}
	
	.step .slide .slide_paging {width: 800px !important; margin-left: -400px}
	.book_detatil{justify-content: center; margin: 55% auto 0;}
	.book_detatil mark{height: 100px; border-radius: 100px; line-height: 100px; font-size: 26px;}
	.book_detatil .lala{font-size: 24px;}
	.book_detatil .lala span{display: inline;}
	.level01{background-position: 50% 26%; background-size: contain;}
	.step .slide .slide_paging{width: 100%;}
	.step .slide_paging .inner{top: 40%;}
	.step .slide_paging a{width: 26px; height: 42px;}
	.step .slide_paging a.prev{left: 0px;}
	.step .slide_paging a.next{right: 0px;}
	.step_navi {width: 93vw; bottom: 10%}
	.step_navi li {width: 20vw; height: 20vh;}
	.step_navi li a {background-size: 100% !important}
	.step_navi li.step_menu04 a {width: auto}

	
	.book_detatil {margin: 0 auto}
	.step .book_thumb {text-align: center;}
	.step .book_wrap {width: calc(100vw - 80px)}

	.habit{text-align: center; height: 840px; background-size: 80%; background-position: 50% 90%;  padding: 100px 0 0}
	.habit .btn_view{margin: 35px auto 0; width: 224px; height: 56px; line-height:56px; font-size: 23px; text-align: left; padding-left: 35px;;}
	.habit .btn_view::before{right: 19px; top: 19px; width: 28px; height: 16px;}
}

@media screen and (max-width: 850px) {
	
	.inner{width: calc(100% - 60px)}
	.inner h2 {font-size: 35px}
	.inner p.add_txt {font-size: 20px; width: 70vw; margin: auto}
	
	.visu {height: 50vh}
	.visu h1{width: 310px; height: 198px; background-size: contain; }

	.intro{height: 2210px; background-size: 850px; padding-top: 100px;}
	.intro .inner {height: 2060px}
	.intro .cont{width: 380px; min-height: 415px;}
	.intro .cont .penta {width: 340px; height: 415px; margin: 0 auto}
	.intro h2 {width: auto; height: 90px; margin: 0}
	.intro h2 p{font-size: 28px;}
	.intro .inner p.add_txt {font-size: 30px; margin-top: 17px}
	.intro .slide_paging .prev{left: 25px;}
	.intro .slide_paging .next{right: 25px;}
	.intro .futurebook_cha {width: 28vw; right: 10px !important; bottom: 20px;}
	.intro .cont .penta h3 .kockoc {width: 75px; height: 120px; top:-65px; left: 69px}
	.intro .cont .penta h3 {font-size: 37px; text-indent: 89px}


	
	.app {height: 700px;}
	.app .txtbox {padding-top: 80px}
	.app .txt_img_wrap .app_img {height: 395px}
	
	.feature {padding: 80px 0 0}
	.feature .cate {width: calc(100vw - 60px); padding: 20px}
	.feature .cate li .img_box {margin-right: 20px}
	.feature .topic{padding: 0;}
	.feature .topic a.title{height: 90px; padding: 0; text-align: center; font-size: 15px;}
	.feature .cate li{width: 100%; font-size: 23px;}
	.feature .cate li strong{font-size: 28px;}
	.feature .cate li .txt_box strong {font-size: 20px}
	.feature .cate li .txt_box {font-size: 16px}
	.feature .topic .ui-tabs-nav {width: 100%}
	.book_detatil .lala {font-size: 16px}
	
	.step .book_thumb img {width: 100%}
	.step .box {height: 800px}
	.step .slide .slide_paging {left: 3%; width: 710px;}
	.step_navi li {height: 200px}
	
	.habit {height: 720px; padding: 80px 0 0}
	
	/* 샤퍼이미지 */
	.sharper_image .w_wrap {width: calc(100% - 40px)}
	.sh_visual {height: 70vh; background: url('../images/sharper_image/visual_m.jpg') no-repeat center center; justify-content: center; background-size: 100%}
	.sh_visual .logo {margin-top: -30vh}
}

@media screen and (min-width: 550px) {
	.display_m {display: none;}
	.display_w {display: block;}
	}

@media screen and (max-width: 550px) {
	.display_m {display: block;}
	.display_w {display: none;}
	
	.inner h2{font-size: 35px;}
	.inner p.add_txt{font-size: 23px;}

	.visu{height: 400px;}
	.visu h1{width: 216px; height: 132px; display: none}
	.videoBox:before {display: none}
	
	.intro{height: 2250px; background-size: 750px; padding-top: 60px; background-position: 40% 0}
	.intro .cont{width: 400px; min-height: 440px}
	.intro .inner {height: 2140px}
	.intro h2 {width: 405px; height: 68px; margin: 0 auto}
	.intro h2 p{font-size: 20px; margin-top: 0px;}
	.intro .inner p.add_txt {font-size: 23px;}
	.intro .cont .penta{width: auto; height: 440px; margin: 0 auto 30px}
	.intro .cont .penta h3{text-indent: 63px; font-size: 20px; width: 100%; font-weight: 700; padding: 0}
	.intro .cont .penta h3 .kockoc{top: -58px; left: 80px; width: 70px; height: 112px;}
	.intro .slide_paging a{width:23px; height:32px;}
	.intro .slide_paging .prev{left: 20px; top: 41%;}
	.intro .slide_paging .next{right: 20px; top: 41%;}
	.intro .futurebook_cha {bottom: -10px}

	.app {height: 800px;}
	.app .txt_img_wrap .app_img {width: 90%; height: 100%;}
	.app .cont02 {background-size: 160%}
	.app .txt_img_wrap {height: auto}

	.feature .topic a.title{width: 27vw; height: 185px; padding: 0; text-align: center; font-size: 21px; margin: 0 0 30px}
	.feature .topic .ui-tabs-active a.title {font-weight: 800}
	.feature .cate{padding: 30px 20px 50px;}
	.feature .cate li{width: 100%; }
	.feature .cate li strong{font-size: 20px;}
	.feature .cate li {font-size: 17px; flex-direction: column; align-items: center; justify-content: center; text-align: center;} 
	.feature .feature01 .cate li:nth-child(n+2) {margin-top: 40px;}
	.feature .feature02 .cate li {padding-left: 0}
	.feature .feature02 li .img_box {width: 100px !important; height: 100px;}
	.feature .feature02 .cate li::before { background-size: 50px 50px !important;}
	.feature .feature02 .cate li:nth-child(n+2) {margin-top: 40px;}
	.feature .feature03 .cate li:nth-child(n+2) {margin-top: 40px;}
	.feature .cate li .img_box {width: 100%; margin-right: 0}
	.feature .cate li .txt_box strong {font-size: 25px}
	.feature .cate li .txt_box {font-size: 20px}
	.feature .feature03 .cate li:last-child .img_box {margin-bottom: 40px;}
	

	.book_detatil{width: 80%; flex-direction:row; flex-wrap: wrap; margin: 20px auto 10px}
	.book_detatil mark {width: 80px; height: 80px; border-radius: 80px;  line-height: 80px; font-size: 18px; margin: 10px 0;}
	.book_detatil .lala {font-size: 20px;}
	.step .box {height: 850px}
	.step .book_wrap {flex-direction: column-reverse; margin-top: -20px}
	.step_navi .inner {width: 100%}
	.step_navi li {width: 25%; height: 150px}
	.step_navi li.step_menu04 {width: 25%;}
	.step .slide_paging a {width: 18px;}
	
	
	.youtube {padding: 80px 0}
	.youtube .video_wrap li {width: 100%}
	
	.habit {height: 670px}
	.habit .btn_view { margin: 30px auto 0; width: 180px; height: 50px; line-height: 50px; font-size: 18px; padding-left: 25px;}
	
	/* 샤퍼이미지 */
	.sh_visual {height: 60vh;}
	.sh_intro h1 {width: 70vw; margin: 40px auto}
	.sh_intro p {margin-top: 20px}
	.sh_goods_list h2 {font-size: 35px; margin-bottom: 10px}
	.sh_goods_list p {font-size: 20px;}
	.sh_intro p, .sh_goods_list .tab .tab_rc, .sh_goods_list .tab .tab_lasergun, .sh_goods_list .goods_list li span {font-size: 16px;}
	
	.sh_intro {height: auto; padding: 80px 0}
	.sh_intro .intro_logo {width: 50%}
	
	.sh_goods_list {padding: 80px 0}
	.sh_goods_list .tab {margin: 0 auto 40px; border-radius: 10px}
	.sh_goods_list .tab .tab_rc, .sh_goods_list .tab .tab_lasergun {padding: 12px 0;}
	.sh_goods_list .goods_list {margin: 40px -10px 0;}
	.sh_goods_list .goods_list li .thumb {margin: 0 10px 10px}
	.sh_goods_list .goods_list li:nth-child(-n+2) {margin-bottom: 20px}
	
	.sh_youtube {margin: 0; padding: 80px 0}
}

@media screen and (max-width: 414px) {
	.inner h2{font-size: 25px; margin-bottom: 15px}
	.inner p.add_txt{font-size: 16px;}

	.visu{height: 300px;}
	.visu h1{width: 130px; height: 92px; top:100px; display: none}
	
	.intro {height: 1800px; padding-top: 40px; background-size: 640px;}
	.intro h2 {width: 300px; height: 90px;}
	.intro h2 p{font-size: 17px; margin-top: -10px;}
	.intro .inner {height: 1730px}
	.intro .cont {width: auto;}
	.intro .cont .penta{width: 300px; height: 300px;}
	.intro .cont .penta h3 .kockoc{ top: -33px; left: 80px; width: 38px;}
	.intro .cont .on{font-size: 18px;}
	.intro .slide_paging a{width: 24px; height: 32px;}
	.intro .slide_paging .prev{left: 10px; top: 39%;}
	.intro .slide_paging .next{right: 10px; top: 39%;}
	.intro .futurebook_cha {right: -30px !important; bottom: 40px}
	.intro .inner p.add_txt {margin-top: 0; font-size: 23px; line-height: 1.3em}

	.app { height: 600px;}

	.feature .cont{margin-top: 30px}
	.feature .topic{height: auto;}
	.feature .topic .title span, .feature .cate li span{ display:  contents;}
	.feature .cate li{width: 100%; font-size: 14px;}
	.feature .topic a.title {font-size: 15px; height: 140px}
	.feature .cate li strong{font-size: 18px;}
	.feature .feature01 .cate li {font-size: 16px;}
	.feature .feature01 .cate li:nth-child(n+2), .feature .feature02 .cate li:nth-child(n+2), .feature .feature03 .cate li:nth-child(n+2)  {margin-top: 30px;}
	.feature .feature02 .cate {padding-left: 20px;}
	.feature .feature02 .cate li {font-size: 15px;}
	.feature .feature02 .cate li::before {width: 60px; height: 60px; background-size: 40px 40px !important;}
	 {margin-top: 40px;}
	.feature .cate li .txt_box strong {margin-bottom: 10px; font-size: 20px}
	.feature .cate li .txt_box {font-size: 15px}
	.feature .feature02 li .img_box {width: 80px !important; height: 80px; margin-bottom: 20px}
	.feature .inner p.add_txt {margin-top: 0}

  	.step, .step .box {height: 680px;}
  	.step .boo_wrap {margin-top: -70px}
	.book_detatil{margin: auto; width: 57%;}
	.book_detatil .logo {width: 95px; height: 55px;}
	.book_detatil mark {width: 65px; height: 65px; border-radius: 65px;  line-height: 65px; font-size: 15px; margin: 10px 0;}
	.step .slide .slide_paging {width: 380px;}
	.step .slide_paging a { width: 16px; height: 32px;}
	.step .book_wrap {margin-top: -20px}
	.step_navi .inner {width: 100%; height: 130px}
	.step .inner p.add_txt {margin-top: -10px}
	
	.habit {height: 570px}
	.habit .btn_view { margin: 20px auto 0; width: 150px; height: 40px; line-height: 40px; font-size: 13px; padding-left: 18px;}
	.habit .btn_view::before{right: 16px; top:13px; width: 30px; height:11px;}
	.inner p.add_txt {width: 100%}
	
	/* 샤퍼이미지 */
	.sh_goods_list .goods_list li {flex: 1 1 100%}
	.sh_goods_list .goods_list li:nth-child(-n+3) {margin-bottom: 40px}

}

@media screen and (max-width: 375px) {
/*
	.intro {height: 830px; padding-top: 20px}
	.intro .cont {top: 333px; min-height: 400px;}
	.intro .cont .penta{width: 280px; height: 320px;}
	.intro .cont .penta h3 .kockoc{ top: -44px; left: 64px; width: 47px; height: 100px;}
	.intro .cont .on{font-size: 16px;}
	.intro .slide_paging .prev, .intro .slide_paging .next {top: 31%;}
	.intro .futurebook_cha {right: 30px !important; bottom: 210px;}
		
	.app {height: 450px;}
	.app .txtbox {padding-top: 80px;}
	.step_navi {width: 100vw}
	.step, .step .box {height: 680px;}
	.step_navi li { width: 70px; height: 120px;}
	.step_navi li.step_menu04 {width: 130px; height: 106px;}
	.step .slide .slide_paging {width: 340px;}
	.step .slide .slide_paging{top: 37%;}
	
	
	.feature .cate {min-height: 450px; height: 450px}
	.feature .feature02 .cate li:first-child {margin-top: 0}
	.feature .feature01 .cate li {padding-left: 100px; font-size: 14px;}
	.feature .feature01 .cate li::before {width: 85px; height: 80px;}
	.feature .feature02 .cate li {padding-left: 60px; font-size: 14px;}
	.feature .feature02 .cate li::before {width: 50px; height: 50px; background-size: 30px 30px !important;}
	.feature .feature02 .cate li:nth-child(n+2) {margin-top: 5px;}

	.habit{padding: 40px 30px; }
*/

}