@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2019-02-18
Modify Date : 2019-02-19
File : /event/2019/responskin
*******************************************/

/* common */
#wrap {display:block; width:100%; font-size:24px; font-weight:200; color:#767676; line-height:1.3; letter-spacing:-1px; position: relative;}
.show_mot {opacity:0; top:20px; position:relative;}
.show_mot.last {display:none !important;}
.section {position:relative; text-align:center;}
.section > .sub_wrap, .scrollex > .sub_wrap {opacity:1; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;}
.section.active > .sub_wrap, .scrollex.active > .sub_wrap {opacity:1;}
.section .inner {position:relative; width:1200px; margin:0 auto; padding:100px 0;}
.section h3 {margin-bottom:60px; font-size:48px; font-weight:100; color:#333; letter-spacing:-2px; line-height:1.2;}
.section h3 strong {font-weight:700;}
.section h3 .tit {font-weight:inherit;}
.section h3 .txt {margin-top:30px; font-size:24px; font-weight:300; color:#333; letter-spacing:-1px; line-height:1.6;}
.section .bx-wrapper {margin-bottom:0; background:transparent;}
.section .bx-controls-direction {display:none;}
.section .bx-wrapper .bx-pager.bx-default-pager a {width:30px; height:7px; margin:0 2px; background:#aaa; transition:all 0.5s; -webkit-transition:all 0.5s;}
.section .bx-wrapper .bx-pager.bx-default-pager a.active {width:60px; background:#333;}
.back {position: absolute; top:0; left:0; overflow:hidden; width:100%; }
.back .dim {position: absolute; background:rgba(0, 0, 0, 0.8); width:100%; height:100%;}
.back .scaleMot{position: relative;  left:-50%;  transform:translate(50%, 0);}
.back .scaleMot img{position:absolute; left:0; top:0;}

/* section0 */
#section0 .tit {font-weight:800; font-size:80px; letter-spacing:5px; margin:40px auto;}
#section0 .tit1 {font-weight:500; font-size:70px; letter-spacing:5px;} 
#section0 .txt1 {font-size:40px; letter-spacing:3px; font-weight:200;} 
#section0 .txt2 {font-size:20px; letter-spacing:3px; font-weight:300; line-height:1.5;} 
#section0 .txt3 {font-size:40px; letter-spacing:3px; font-weight:200;}
#section0 h3 .txt, #section0 h3 {color:#FFF;}
#section0 h3 {margin-top:20px; margin-bottom:0;}

/* section1 */
#section1 {width:100%; overflow:hidden; color:#000; z-index:10;}
#section1 .tit1 {position:relative; color:#FFF; font-size:48px; font-weight:600; top:20px; opacity:0;  transition:all 0s; -webkit-transition:all 0s;}
#section1 .tit1 .txt {margin-top:10px; font-size:0.7em; color:#fff;}
#section1 .img_div {position:relative; width:100%; height: 600px;}
#section1 .img_div img{position:absolute; max-width:none;}
#section1 .img_div .mac {left:120px; opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section1 .img_div .ipad {margin-top:95px; left:-110px; opacity:0;  transition:all 0s; -webkit-transition:all 0s;}
#section1 .img_div .iphone {left:-255px; margin-top:200px;  opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section1 .img_div .foldable_phone {right:-100px; margin-top:140px;  opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section1 .img_div .foldable_phone_mess {opacity:0; right:-120px; bottom:68px;}
#section1 .img_div .foldable_phone_mess2 {opacity:0;}
#section1 .inner {padding: 0 0 100px;}
#section1.active .tit1{opacity:1; top:0; transition:all 0.7s; -webkit-transition:all 0.7s;}
#section1.active .img_div .mac {opacity:1; transition:all 1.5s ease 0.3s; -webkit-transition:all 1.5s ease 0.3s;}
#section1.active .img_div .ipad {opacity:1; left:-87px; transition:all 0.5s ease-out 0.5s; -webkit-transition:all 0.5s ease-out 0.5s;}
#section1.active .img_div .iphone {opacity:1; left:-225px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
#section1.active .img_div .foldable_phone {opacity:1; right:-100px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
#section1.active .img_div .foldable_phone_mess {opacity:1; right:-145px; bottom:68px; -webkit-animation: moveSlideshow 0.7s linear infinite 3s; -moz-animation: moveSlideshow 0.7s linear infinite 3s; -o-animation: moveSlideshow 0.7s linear infinite 3s; transition:all 0.4s ease-out 1.5s; -webkit-transition:all 0.4s ease-out 1.5s }

@-webkit-keyframes moveSlideshow {
 0% {transform: translateX(0px);}
 50% {transform: translateX(-10px);}
 100% {transform: translateX(0px);}
}

@-moz-keyframes moveSlideshow {
  0% {transform: translateX(0px);}
 50% {transform: translateX(-10px);}
 100% {transform: translateX(0px);}
}

@-o-keyframes moveSlideshow {
  0% {transform: translateX(0px);}
 50% {transform: translateX(-10px);}
 100% {transform: translateX(0px);}
}

/* section2 */
#section2 .inner {padding: 0 0 100px; margin-top:-70px; z-index:10;}
#section2 .tit2{ font-size:24px; font-weight:400; margin-bottom:30px;}
#section2 .txt {font-size:16px; color:#000; line-height:1.7;}
#section2 .txt3 {font-size:12px; color:#6f6f6f; margin-top:5px;}
#section2 .img_div2 {margin-top:40px;}
#section2 .img_div2 li{display:inline-block; margin:0 30px;}

/* section3 */
#section3 {background:#efefef; overflow:hidden;}
#section3 .slickA > div {position:relative; height:680px; width:100%;}
#section3 .slickA .mess1 {position:absolute; text-align:left; left:0; width:100%;  top:40px; opacity:0; transition:all 0s; top:33px; -webkit-transition:all 0s; top:33px;}
#section3 .slickA .mess1 .num {color:#aeaeae; font-size:40px; font-weight:700;}
#section3 .slickA .mess1 .txt {color:#5e5e5e; font-size:40px; }
#section3 .slickA .mess2 {position:absolute; top:300px; text-align:left; width:100%; opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section3 .slickA .mess2 .tit {color:#5e5e5e; font-weight:600; width:70%; font-size:18px; padding:15px 0; margin-bottom:15px; border-bottom:1px solid #dcdcdc;}
#section3 .slickA .mess2 .txt {font-size:20px; width:30%; font-weight:300; color:#5e5e5e;}
#section3 .slickA .mess3 {position:absolute; top:520px; text-align:left; width:100%; opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section3 .slickA .mess3 .tit {color:#5e5e5e; font-weight:600; width:70%; font-size:18px; padding:15px 0; margin-bottom:15px; border-bottom:1px solid #dcdcdc;}
#section3 .slickA .mess3 .txt {font-size:20px; width:35%; font-weight:300; color:#5e5e5e;}
#section3 .slickA .img_div {position:absolute; width:100%; top:0; z-index: 10;}
#section3 .slickA .pc {position:absolute; left:28%; top:20px; opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section3 .slickA .tablet {position:absolute; right:0; top:220px; opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section3 .slickA .mobile {position:absolute; right:250px; top:290px; opacity:0; transition:all 0s; -webkit-transition:all 0s;}
#section3 .slickA .slick-dots li {width:8px; height:8px; margin:0 5px}
#section3 .slickA .slick-dots li.slick-active {background:rgba(0, 0, 0, 0); border:2px solid #000; width:12px; height:12px;}
#section3 .slickA .slick-dots li {font-size:0;  background:#a6a6a6; opacity: 1; width:8px; height:8px; border-radius:50%;  margin-bottom:2px;}
#section3 .slickA .slick-dots li *{opacity:0;}
#section3 .slickA .slick-dots {bottom:-50px}
#section3 .slickA .slick-prev {left:-100px; border-radius:50%; width:80px; height:80px; z-index:10;  background:url('/images/event/20190808/btn_left.png') no-repeat center; background-color:rgba(0, 0, 0, 0.3);}
#section3 .slickA .slick-next {right:-100px; border-radius:50%; width:80px; height:80px; background:url('/images/event/20190808/btn_right.png') no-repeat center; background-color:rgba(0, 0, 0, 0.3);}
#section3 .slickA .slick-prev:hover,
#section3 .slickA .slick-next:hover {background-color:rgba(0, 0, 0, 0.5);}
#section3 .slickA .slick-prev:before, 
#section3 .slickA .slick-next:before {font-size:0;}
#section3 .slickA .slick-slide.slick-active .mess1 {opacity:1; top:20; transition:all 0.3s ease-out 0.3s; -webkit-transition:all 0.3s ease-out 0.3s;}
#section3 .slickA .slick-slide.slick-active .mess2 {opacity:1; top:280px; transition:all 0.4s ease-out 0.5s; -webkit-transition:all 0.4s ease-out 0.5s;}
#section3 .slickA .slick-slide.slick-active .pc {opacity:1; top:0; transition:all 0.5s ease-out 1s; -webkit-transition:all 0.5s ease-out 1s;}
#section3 .slickA .slick-slide.slick-active .mess3 {opacity:1; top:500px; transition:all 0.4s ease-out 1.4s; -webkit-transition:all 0.4s ease-out 1.4s;}
#section3 .slickA .slick-slide.slick-active .tablet {opacity:1; top:200px; transition:all 0.4s ease-out 1.4s; -webkit-transition:all 0.4s ease-out 1.4s;} 
#section3 .slickA .slick-slide.slick-active .mobile {opacity:1; top:270px; transition:all 0.5s ease-out 1.9s; -webkit-transition:all 0.5s ease-out 1.9s;}

/* section4 */
#section4 {overflow:hidden;}
#section4 .inner {width:1022px; }
#section4 .inner .box {}
#section4 .secBox {padding:0 5%; width:100%; }
#section4 .secBox li {float:left;  width:20%; text-align:center;}
#section4 .icon1 { background:url('/images/event/20190808/icon1.png') no-repeat center 25%;}
#section4 .icon2 { background:url('/images/event/20190808/icon2.png') no-repeat center 25%;}
#section4 .icon3 { background:url('/images/event/20190808/icon3.png') no-repeat center 25%;}
#section4 .icon4 { background:url('/images/event/20190808/icon4.png') no-repeat center 25%;}
#section4 .icon5 { background:url('/images/event/20190808/icon5.png') no-repeat center 25%;}
#section4 .icon6 { background:url('/images/event/20190808/icon6.png') no-repeat center 25%;}
#section4 .icon7 { background:url('/images/event/20190808/icon7.png') no-repeat center 25%;}
#section4 .icon8 { background:url('/images/event/20190808/icon8.png') no-repeat center 25%;}
#section4 .icon9 { background:url('/images/event/20190808/icon9.png') no-repeat center 25%;}
#section4 .icon10 { background:url('/images/event/20190808/icon10.png') no-repeat center 25%;}
#section4 .icon11 { background:url('/images/event/20190808/icon11.png') no-repeat center 25%;}
#section4 .icon12 { background:url('/images/event/20190808/icon12.png') no-repeat center 25%;}
#section4 .icon13 { background:url('/images/event/20190808/icon13.png') no-repeat center 25%;}
#section4 .icon14 { background:url('/images/event/20190808/icon14.png') no-repeat center 25%;}
#section4 .icon15 { background:url('/images/event/20190808/icon15.png') no-repeat center 25%;}
#section4 .secBox li > div {display:inline-block; margin-bottom:25px; width:155px; height:155px; border:2px solid #000; border-radius:50%; background-color:#FFF; padding-top:80px; font-size:18px; font-weight:500; color:#000; box-shadow:10px 10px 20px rgba(0,0,0,0.1);}
#section4 .secBox li img {transition:all ease 0.5s; -webkit-transition:all ease 0.5s;}
#section4 .secBox li img:hover {transform:translateY(-5px);/*rotate(5deg)*/;}
#section4 .box{position:relative; width:100%; padding:10px 0;}
#section4 .back{position:absolute; background:url('/images/event/20190808/device_back.png') repeat; height:100%; width:2500px; top:0; left:-50%; }
#section4 h3.bot {margin-bottom:0;}

/* section5 */
#section5 {background:#ecf1f6;}
#section5 .inner {width:100%;}
#section5 .slickB {width:100%;}
#section5 .slickB .slick-slide { padding: 0 30px;}
#section5 .slickB .slick-slide img {width:100%;}
#section5 .slickB .slick-prev {left:350px; border-radius:50%; width:80px; height:80px; z-index:10;  background:url('/images/event/20190808/btn_left.png') no-repeat center; background-color:rgba(0, 0, 0, 0.3);}
#section5 .slickB .slick-next {right:350px; border-radius:50%; width:80px; height:80px; background:url('/images/event/20190808/btn_right.png') no-repeat center; background-color:rgba(0, 0, 0, 0.3);}
#section5 .slickB .slick-prev:hover,
#section5 .slickB .slick-next:hover {background-color:rgba(0, 0, 0, 0.5);}
#section5 .slickB .slick-prev:before, 
#section5 .slickB .slick-next:before {font-size:0;}
#section5 .slickB dl {display:inline-block; }
#section5 .slickB dl dd,  #section5 .slickB dl dt{display:inline-block; float:left; text-align:left;}
#section5 .slickB .tit {margin-right:20px; border-bottom:2px solid #8498ac; color:#7d92a7; font-size:35px; font-weight:600;}
#section5 .slickB .txt {font-size:20px; color:#41576d; text-align:left; margin-top:4px;}
#section5 .slickB dl.v2 {max-width: 860px; width: 100%;}
#section5 .slickB dl.v2 .txt{ width:calc(100% - 300px);}

/* section6 */
#section6 .inner {width:1195px ;}
#section6 .secBox {width:100%; margin:0 auto; display:inline-block; }
#section6 .secBox > li {position:relative; width:28%; margin:25px 2.5%; display: inline-block; float:left; border:1px solid #e5e7e6; /*overflow:hidden;*/ box-shadow:0 5px 10px rgba(0,0,0,0.15);}
#section6 .secBox > li .icon {position:absolute; top:-20px; right:-10px; width:74px; height:74px; background:url('/images/event/20190510/img_designskin_icon.png') no-repeat; animation:skin_icon2 1s ease infinite;}
@keyframes skin_icon2 {0% {transform:scale(0.95);} 50% {transform:scale(1);} 100% {transform:scale(0.95);}}
#section6 .secBox > li a { display:block; transition:all 0.5s; -webkit-transition:all 0.5s;}
#section6 .secBox > li > ul > li {margin-bottom:50px;}
#section6 .secBox > .gon_cont1 {margin-top:100px;}
#section6 .secBox > .gon_cont2 {margin-top:150px;}
#section6 .secBox li > a img {width:100%;}
#section6 .box {position:relative;}
#section6 .secBox > li .pointer {position:absolute; opacity:0;}
#section6 .secBox li {cursor: none;}
figure#mouse-pointer {background-image: url('/images/event/20190808/mouse_pointer.png'); width: 78px; z-index:10; opacity:0; height: 78px; position: absolute; margin-left: -8px; display: block;}

/* section7 */
#section7 .expert {padding:70px 0; background:url('/images/event/20190808/section6_back.jpg') no-repeat fixed; background-size:cover;}
#section7 .expert h3 {margin-bottom:30px; font-size:46px; color:#fff; }
#section7 .expert h3 .txt {color:#FFF; font-size:36px; font-weight:200; margin:0 0 10px; letter-spacing:3px;}
#section7 .expert h3 .phone {font-weight:200; letter-spacing:3px; margin:30px 0; font-size:56px; }
#section7 .expert a.btn {display:inline-block; border-radius:50px; border:1px solid #fff; padding:8px 50px; font-size:20px; font-weight:100; color:#fff; transition:all ease 0.5s; -webkit-transition:all ease 0.5s;}
#section7 .expert a.btn2 {display:inline-block; margin-right:15px; border-radius:50px; border:1px solid #fff; padding:8px 50px; font-size:20px; font-weight:400; color:#49494a; transition:all ease 0.5s; -webkit-transition:all ease 0.5s; background:#FFF;}
#section7 .expert a.btn:hover, #section6 .expert a.btn2:hover {background:rgba(255,255,255,0.2); color:#fff; font-weight:100;}

/* section8 */
#section8 .expert {padding:40px 0;background:url('/images/event/20190808/section7_back.jpg') no-repeat center center; }
#section8 .expert h3 {font-size:36px; color:#fff; letter-spacing:6px; margin-bottom:23px; line-height:1.3;}
#section8 .expert a.btn {display:inline-block; border-radius:50px; border:1px solid #fff; padding:8px 50px; font-size:20px; font-weight:100; color:#fff; transition:all ease 0.5s; -webkit-transition:all ease 0.5s;}
#section8 .expert a.btn:hover {background:rgba(255,255,255,0.2);}

@media (min-width:0) and (max-width:1336px) {
	#section5 .slickB .slick-next {right:250px;}
	#section5 .slickB .slick-prev {left:250px;} 
}

@media (min-width:0) and (max-width:1179px) {
	body, #section0 {overflow-x:hidden;}	
	.section .inner {padding-left:20px; padding-right:20px;}
	.section .inner,
	.section .secBox,
	.section video {max-width:100%;}
	.section h3, .section h3 .tit, #section0 h3 {font-size:34px; line-height:1.4;}
	.section h3 strong {font-size:40px;}
	.show_mot.last {display:block !important;}
	#section0.active .img01 img,
	#section0.active .img02 img,
	#section0.active .img03 img {max-width:none;}
	#section0 .tit {font-size:60px;}	
	#section1 .tit1 {font-size:38px;}
	#section1 h3 .txt {color:#FFF;}
	#section1 .secBox2 li {width:48%; margin:1%;}
	#section1 .img_div .mac {left: -13%; width: 120%; position: relative;}
	#section1 .img_div .ipad {left: -150px; margin-top: 95px; top: 0px; width: 48%;}
	#section1 .img_div .iphone {left: -155px; margin-top: 0px; top: 180px; width: 44%;}
	#section1 .img_div .foldable_phone {width: 38%; right:-60px;  top:150px; margin-top:0;  opacity:0; transition:all 0s; -webkit-transition:all 0s;}
	#section1 .img_div .foldable_phone_mess2 {opacity:0; right:255px; bottom:133px; }
	#section1 .img_div {height:auto;}
	#section1.active .tit1{opacity:1;  transition:all 0.7s; -webkit-transition:all 0.7s;}
	#section1.active .img_div .mac {opacity:1; transition:all 1.5s ease 0.3s; -webkit-transition:all 1.5s ease 0.3s;}
	#section1.active .img_div .ipad {opacity:1; left:-150px; transition:all 0.5s ease-out 0.5s; -webkit-transition:all 0.5s ease-out 0.5s;}
	#section1.active .img_div .iphone {opacity:1; left:-155px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
	#section1.active .img_div .foldable_phone {opacity:1; right:-60px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
	#section1.active .img_div .foldable_phone_mess2 {opacity:1; -webkit-animation: moveSlideshow 0.7s linear infinite 3s; -moz-animation: moveSlideshow 0.7s linear infinite 3s; -o-animation: moveSlideshow 0.7s linear infinite 3s; transition:all 0.4s ease-out 1.5s; -webkit-transition:all 0.4s ease-out 1.5s }
	#section3 .slickA > div {position:relative; height:auto; width:100%;}
	#section3 .slickA .mess1 {position:relative; left:0; top:0; text-align:center; width:100%;}
	#section3 .slickA .mess1 .num {text-align:center; margin-bottom:10px;}
	#section3 .slickA .mess1 .txt {width:auto; display:inline-block; border-bottom:1px solid #000;}	
	#section3 .slickA .mess2 {position:relative; left:0; top:0; margin-top:30px;}
	#section3 .slickA .mess2 .tit {width:100%; text-align:center;}
	#section3 .slickA .mess2 .txt {width:100%; word-break: keep-all; text-align:center;}
	#section3 .slickA .mess3 {position:relative; left:0; top:0; margin-top:50px;}
	#section3 .slickA .mess3 .tit {width:100%; text-align:center;}
	#section3 .slickA .mess3 .txt {width:100%; word-break: keep-all; text-align:center;}	
	#section3 .slickA .img_div {position:relative; height:600px; text-align:center; width:100%;}
	#section3 .slickA .pc {position:relative; left:0; top:20; opacity:0; transition:all 0s; -webkit-transition:all 0s; padding:30px; width:100%;}
	#section3 .slickA .tablet {position:absolute; right:0; top:200px; opacity:0; transition:all 0s; -webkit-transition:all 0s;} 
	#section3 .slickA .mobile {position:absolute; right:auto; left:0; top:255px; opacity:0; transition:all 0s; -webkit-transition:all 0s;}
	#section3 .slickA .slick-slide.slick-active .mess1 {opacity:1;  transition:all 0.3s ease-out 0.3s; -webkit-transition:all 0.3s ease-out 0.3s;}
	#section3 .slickA .slick-slide.slick-active .mess2 {opacity:1; top:0; transition:all 0.4s ease-out 0.5s; -webkit-transition:all 0.4s ease-out 0.5s;}
	#section3 .slickA .slick-slide.slick-active .pc {opacity:1; transition:all 0.5s ease-out 1s; -webkit-transition:all 0.5s ease-out 1s;}
	#section3 .slickA .slick-slide.slick-active .mess3 {opacity:1; top:0; transition:all 0.4s ease-out 1.4s; -webkit-transition:all 0.4s ease-out 1.4s;}
	#section3 .slickA .slick-slide.slick-active .tablet {opacity:1; top:180px;transition:all 0.5s ease-out 1.7s; -webkit-transition:all 0.5s ease-out 1.7s;}
	#section3 .slickA .slick-slide.slick-active .mobile {opacity:1; top:235px; transition:all 0.5s ease-out 1.9s; -webkit-transition:all 0.5s ease-out 1.9s;}	
	#section3 .slickA .mess1 .txt br {display:none;}	
	#section4 .secBox {padding:0;}	
	#section5 .inner {padding-bottom:100px;}
	#section5 .bx-viewport {height:auto !important;}
	#section6 .secBox {width:100%; margin:0 auto; display:inline-block; height:auto;}
	#section6 .secBox > li {width: 44.9%;}
	#section6 .secBox > li.skin01 {display:block;}
}

@media (min-width:0) and (max-width:1024px) {
	#section5 .slickB .slick-next {right:0;}
	#section5 .slickB .slick-prev {left:0;} 
	#section5 .slickB .slick-slide { padding:0;}
	#section4 .secBox li {width:33.3%;}
}

@media (min-width:0) and (max-width:1023px) {	
	#section1 .img_div .ipad {left: -150px; margin-top: 95px; top: -15px; width: 48%;}
	#section1 .img_div .iphone {left: -155px; margin-top: 0px; top: 135px; width: 44%;}
	#section1 .img_div .foldable_phone {width: 38%; right:-45px;  top:115px; margin-top:0;  opacity:0; transition:all 0s; -webkit-transition:all 0s;}
	#section1 .img_div .foldable_phone_mess2 {opacity:0; right:180px; bottom:98px; }
	#section1 .img_div {height:auto;}
	#section1.active .tit1{opacity:1;  transition:all 0.7s; -webkit-transition:all 0.7s;}
	#section1.active .img_div .mac {opacity:1; transition:all 1.5s ease 0.3s; -webkit-transition:all 1.5s ease 0.3s;}
	#section1.active .img_div .ipad {opacity:1; left:-150px; transition:all 0.5s ease-out 0.5s; -webkit-transition:all 0.5s ease-out 0.5s;}
	#section1.active .img_div .iphone {opacity:1; left:-155px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
	#section1.active .img_div .foldable_phone {opacity:1; right:-45px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
	#section1.active .img_div .foldable_phone_mess2 {opacity:1; -webkit-animation: moveSlideshow 0.7s linear infinite 3s; -moz-animation: moveSlideshow 0.7s linear infinite 3s; -o-animation: moveSlideshow 0.7s linear infinite 3s; transition:all 0.4s ease-out 1.5s; -webkit-transition:all 0.4s ease-out 1.5s }
}

@media (min-width:0) and (max-width:640px) {
	#section4 .secBox li {width:50%;}
	.slick-list {overflow:visible;}
	.section .inner,
	.section .expert {padding-top:50px; padding-bottom:50px;}
	.section h3 strong {font-size:28px; letter-spacing:-1px; line-height:1.2;}
	.section h3 {    margin-bottom: 30px;}	
	.section h3 .txt {font-size:18px;}	
	#section0 .tit {letter-spacing:1px; font-size:35px; margin-bottom:20px;}
	#section0 .tit1 {letter-spacing:1px; font-size:34px; margin-top: 20px;}
	#section0 .txt1, #section0 .txt3 {letter-spacing:1px; font-size:22px; padding:0 50px;} 
	#section0 .txt2 {letter-spacing:1px; font-size:14px; padding:0 70px; margin:20px 0 10px;} 
	#section0 .bx-wrapper {display:none;}
	#section0 .img_mo {display:block;}
	#section1 .tit1{font-size:23px;}
	#section1 .img_div .mac {left: -23%; width: 140%; position: relative;}
	#section1 .img_div .ipad {left: -100px;  z-index:10;  margin-top: 75px; top: -15px; width: 53%;}
	#section1 .img_div .iphone {left: -60px; z-index:11; margin-top: 0px; top: 90px; width: 50%;}
	#section1 .img_div .foldable_phone {width: 40%; right:-25px;  top:90px; margin-top:0;  opacity:0; transition:all 0s; -webkit-transition:all 0s;}
	#section1 .img_div .foldable_phone_mess2 {width: 20%; opacity:0; right:86px; bottom:57px; }	
	#section1.active .img_div .mac {opacity:1; transition:all 1.5s ease 0.3s; -webkit-transition:all 1.5s ease 0.3s;}
	#section1.active .img_div .ipad {opacity:1; left: -100px; transition:all 0.5s ease-out 0.5s; -webkit-transition:all 0.5s ease-out 0.5s;}
	#section1.active .img_div .iphone {opacity:1; left:-60px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
	#section1.active .img_div .foldable_phone {opacity:1; right:-25px;  transition:all 0.6s ease-out 0.8s; -webkit-transition:all 0.6s ease-out 0.8s;}
	#section1.active .img_div .foldable_phone_mess2 {opacity:1; -webkit-animation: moveSlideshow 0.7s linear infinite 3s; -moz-animation: moveSlideshow 0.7s linear infinite 3s; -o-animation: moveSlideshow 0.7s linear infinite 3s; transition:all 0.4s ease-out 1.5s; -webkit-transition:all 0.4s ease-out 1.5s }
	#section1 .secBox {margin-top:0;}
	#section1 .secBox2 li {min-height:200px;}
	#section1 .secBox2 li .stit {font-size:18px;}
	#section1 .secBox2 li .stxt {font-size:14px;}	
	#section2 .img_div2 li {margin:0;}
	#section2 .txt {padding: 0 20px;}
	#section3 .slickA .mess1 .txt {font-size:28px;}	
	#section3 .slickA .mess2 {margin-bottom:10px;}
	#section3 .slickA .mess2 .txt, #section3 .slickA .mess3 .txt {font-size:17px;}	
	#section3 .slickA .img_div {height:280px;}
	#section3 .slickA .pc {position:relative; left:-2.5%; top:20px; opacity:0; transition:all 0s; -webkit-transition:all 0s; padding:0px; width:105%;}
	#section3 .slickA .tablet {position:absolute; right:-15px; top:130px; opacity:0; transition:all 0s; -webkit-transition:all 0s; width:45%;}
	#section3 .slickA .mobile {position:absolute; right:auto; left:-15px; top:155px; opacity:0; transition:all 0s; -webkit-transition:all 0s;  width:30%;}
	#section3 .slickA .slick-slide.slick-active .pc {opacity:1; transition:all 0.5s ease-out 1s; -webkit-transition:all 0.5s ease-out 1s;}
	#section3 .slickA .slick-slide.slick-active .tablet {opacity:1;  right:-15px; top:110px; transition:all 0.5s ease-out 1.7s; -webkit-transition:all 0.5s ease-out 1.7s;}
	#section3 .slickA .slick-slide.slick-active .mobile {opacity:1; left:-15px; top:135px; transition:all 0.5s ease-out 1.9s; -webkit-transition:all 0.5s ease-out 1.9s;}
	#section3 .bxflame_pc {margin-left:-80%;}
	#section3 .bxflame_mo {margin-right:0;}
	#section3 .bx-pager > a {font-size:18px; line-height:30px;}	
	#section5 .tabBox .txt {font-size:18px !important;}
	#section5 .bxslider .txt {font-size:18px;}
	#section5 .bx-pager {margin-bottom:30px;}
	#section5 .bx-pager > a {font-size:18px; line-height:40px;}
	#section5 .bxblind {display:block; position:absolute; bottom:0; left:0; width:100%; height:100%;}	
	#section5 .slickB dl {width:100%; display:block;}
	#section5 .slickB dl.v2{width:100%; display:block;}
	#section5 .slickB dl dd, #section5 .slickB dl dt{text-align:center; width:100%; height:auto; display:block; float:none;}
	#section5 .slickB .tit {font-size:21px;}
	#section5 .slickB .txt {text-align: center; font-size:13px; margin-top:7px; padding:0 20px;}
	#section5 .slickB dl.v2 .txt{width:auto;}
	#section5 .slickB dl.v3 .txt{width:auto;}	
	#section6 .secBox li {width: 46%; margin:2%;}
	#section6 .secBox {margin-left:-2%;}
	#section7 .expert h3 {margin-bottom:0; padding: 0 20px;}
	#section7 .expert h3 .txt {margin-bottom:0; font-size: 25px;}
	#section7 .expert h3 strong {display:block; font-size: 28px; line-height:1.4;}
	#section7 .expert h3 .phone {margin:0;}	
	#section7 .expert a.btn2 {margin:15px;}	
}

.back { height:1300px; }
@media (min-width:0) and (max-width:1280px) {
	.back .scaleMot img {max-width:150%; left:-25%;}	
}
@media (min-width:0) and (max-width:768px) {
	.back { height:1100px;}	
	.back .scaleMot img {max-width:180%; left:-50%;}
}
@media (min-width:0) and (max-width:640px) {
	.back { height:850px;}
	.back .scaleMot img {max-width:220%; left:-50%;}
}
@media (min-width:0) and (max-width:480px) {
	.back { height:700px;}
	.back .scaleMot img {max-width:250%; left:-75%;}
}