@charset "utf-8";

/* 공통 */
body.fix {}
body.fix .wrap {}

.wrap {min-width:1280px; overflow:hidden;}
.bg_gray {position:relative; background:#f4f4f4}
.mo {display:none}
.pc {display:block}



.section_title {text-align:center}
.section_title span {display:inline-block; position:relative; line-height:1; padding-bottom:40px; color:#222; font-size:32px}
.section_title span:after {content:''; display:inline-block; position:absolute; left:15%; bottom:0; width:70%; border-bottom:2px solid #ff7d71}
.section_title.blue span:after {border-bottom:2px solid #44c8f5}
.section_title.green span:after {border-color:#acd676}
.section_title.light_blue span:after {border-color:#5f9df1}
.section_title.purple span:after {border-color:#b373b9}
.section_title.yellow span:after {border-color:#f8bf52}
.section_title.light_green span:after {border-color:#55daca}
.section_title.pink span:after {border-color:#f06e9c}
.section_title.sky span:after{border-color:#44c8f5;}

.filed_txt {color:#666; font-size:20px; text-align:center; line-height:33px}
.sketch_bg {position:relative; display:inline-block; z-index:2}
.sketch_bg:after {content:''; display: block; position:absolute; left:0; bottom:0; z-index:-1; width:100%; height:50%; background:#f9beb9}
.sketch_bg.green:after {background-color:#e1f1c0}
.sketch_bg.light_blue:after {background-color:#d1e4ff}
.sketch_bg.purple:after {background-color:#f3daf4}
.sketch_bg.yellow:after {background-color:#fff1d4}
.sketch_bg.light_green:after {background-color:#d6faf5}
.sketch_bg.pink:after {background-color:#ffd7e4}

.btn {display:inline-block; min-width:260px; padding:17px 0 18px 0; font-size:18px; color:#666; text-align:center; border:1px solid #ccc}
.btn.red_line {color:#ff7d71; border-color:#ff7d71}
.btn.red_fill {color:#fff; border-color:#ff7d71; background-color:#ff7d71}
.btn.gray_fill {color:#fff; border-color:#666; background-color:#666}
.btn.green_fill {color:#fff; border-color:#aed778; background-color:#aed778}
.btn.light_blue_fill {color:#fff; border-color:#5f9df1; background-color:#5f9df1}
.btn.purple_fill {color:#fff; border-color:#b373b9; background-color:#b373b9}
.btn.yellow_fill {color:#fff; border-color:#f8bf52; background-color:#f8bf52}
.btn.light_green_fill {color:#fff; border-color:#55daca; background-color:#55daca}
.btn.pink_fill {color:#fff; border-color:#f06e9c; background-color:#f06e9c}

.btn .ico_arrow {display:inline-block; width:22px; height:18px; margin-left:15px; background:url(../images/ico/ico_arrow.png) center center no-repeat}
.btn .ico_down {display:inline-block; width:23px; height:21px; margin-left:15px; background:url(../images/ico/ico_down.png) center center no-repeat}

.in {max-width:1120px; width:100%; margin:0 auto; padding:98px 0 80px}

.header {position:fixed; top:0; z-index:10; width:100%; min-width:1280px; background-color:rgba(255,255,255,0.8); transition:0.5s background}
.header .in {min-width:1290px; padding:0}
.header .in:after {content:''; display:block; clear:both}
.header h1{float:left; width:84px; height:45px; margin-left:45px; padding:10px 0 24px 0; text-indent:-9999em; box-sizing:content-box; background:url(../images/img/img_logo_on.png) center center no-repeat}
.header h1 a {display:block; height:100%}
.header .nav {float:right; padding-right:45px}
.header .nav > ul > li {position:relative; float:left; height:80px}
.header .nav > ul > li ~ li {margin-left:40px}
.header .nav > ul > li.on a{color:#44c8f5}
.header .nav > ul > li > a {display:block; height:100%; padding:24px 0; font-size:18px; color:#aaa; transition:0.5s color}
.header .nav > ul > li > a:hover{color:#44c8f5}

.header .btn_menu {float:right; width:31px; height:14px; padding:18px 15px 18px 0; text-indent:-9999px; box-sizing:content-box; cursor:pointer; background:url(../images/ico/ico_header_menu_on.png) center center no-repeat; background-size:16px 14px}
.header .mo_nav {display:none; position:fixed; top:1px; z-index:999; left:0; width:100%; height:100%; min-height:500px; background-color:#fff}
.header .mo_nav .top:after {content:''; display:block; clear:both}
.header .mo_nav .close {float:right;display:block; width:30px; height:15px; text-indent:-9999em; padding:19px 0 19px 15px; box-sizing:content-box; background:url(../images/ico/ico_nav_close.png) center center no-repeat; background-size:15px}
.header .mo_nav ul {padding-left:15px;}
.header .mo_nav li:first-child {margin-top:15px}
.header .mo_nav li {margin-top:25px}
.header .mo_nav li a {font-size:18px; color:#aaa;}
.header .mo_nav li.current a {color:#44c8f5; font-weight:600}

/* .header.on {background-color:} */
/* .header.on h1{background-image:url(../images/img/img_logo_on.png)} */
/* .header.on .nav > ul > li > a {color:#aaa} */
/* .header.on .nav > ul > li > a:hover {color:#44c8f5} */
/* .header.on .nav > ul > li > a > span {background-image:url(../images/ico/ico_nav_dot_on.png)} */
/* .header.on .btn_menu {background-image:url(../images/ico/ico_header_menu_on.png);} */
/* 
.footer {text-align:center; color:#fff; font-size:18px; background-color:#44c8f5}
.footer a {color:#fff}
.footer .in {padding:95px 0}
.footer .in > p {margin-top:10px}
.footer .mail + p {margin-top:30px}
.footer .call {margin-top:10px; overflow:hidden}
.footer .call p {display:inline-block}
.footer .call p a,
.footer .mail_d a {display:inline-block; margin-top:-6px}
.footer .call p:first-child {position:relative; padding-right:6px}
.footer .call p:first-child:after {content:''; position:absolute; right:0; top:3px; width:1px; height:17px; background-color:#fff}
*/

/* footer */
.footer {padding:80px 0; font-size:14px; color:#888; font-weight:100; text-align:center; background-color:#4b4b4b}
.footer li {display:inline-block; position:relative;}
.footer li:after {content:''; display:block; position:absolute; left:-8px; top:4px; width:1px; height:12px; background-color:#575757}
.footer li:first-child:after {content:none;}
.footer li ~ li {margin-left:12px;}
.footer li a {position:relative; top:-2px; font-size:14px; color:#888; font-weight:100;}
.footer p {margin-top:2px;}

.container {padding-top:80px}
.about_nav_wrap {max-width:1120px; margin:90px auto 0; height:66px;}

.about_nav_wrap.on {width:100%; max-width:100%; background-color:#fff;}
.about_nav_wrap.on .about_nav_bg {position:fixed; left:0; top:80px; z-index:70; width:100%; background-color:#fff; box-shadow:0px 6px 12px rgba(0,0,0,0.1)}
.about_nav_wrap.on .about_nav {max-width:1120px; margin:0 auto;}
.about_nav_wrap.on .about_nav li {border:none}

.about_nav {width:100%;}
.about_nav li {float:left; width:calc(100% / 7); width:14.28571428571429%; text-align:center; border:1px solid #ddd;}
.about_nav li ~ li {border-left:none; }
.about_nav li a {display:block; padding:21px 0;}

.about_nav li.on {background-color:#44c8f5}
.about_nav li.on a {color:#fff}

/* 슬라이드 공통 */
.sli {position:relative; margin-top:115px; padding-bottom:37px; overflow:hidden}
.sli .obj {position:relative; float:left; width:755px;}
.sli .slide_area .info {float:left; width:calc(100% - 755px); margin-top:30px}
.sli .slide_area .info:after {content:''; display:block; clear:both}
.sli .slide_area .info h3 {margin-top:24px; font-weight:700; color:#222; font-size:28px}
.sli .slide_area .info h3:after {content:''; display:block; width:30px; height:2px; margin:26px 0 38px 0; background:#adadad}
.sli .slide_area .info ul li {padding-bottom:8px; color:#666; font-size:16px; font-weight:300}
.sli .slide_area .info ul li ~ li {margin-top:6px}
.sli .slide_area .info .label {margin-top:11px; overflow:hidden}
.sli .slide_area .info .label span {float:left; height:22px; line-height:19px; padding:0 9px; color:#222; border:1px solid #555}
.sli .slide_area .info .label span ~ span {margin-left:4px}
.slide_paging {position: absolute; right:0px; bottom:116px; width:150px; text-align:center; font-size:14px; color:#aaa}
.slide_paging .min {font-size:20px; color:#222}

.slick-arrow {display:inline-block; position:absolute; right:0; bottom:72px; z-index:1000; width:20px; height:38px; text-indent:-9999px}
.slick-prev {right:132px; background:url(../images/ico/slick_left_btn.png) 0 0 no-repeat}
.slick-prev:hover {background-image:url(../images/ico/slick_left_btn_on.png)}
.slick-next {background:url(../images/ico/slick_right_btn.png) 0 0 no-repeat}
.slick-next:hover {background-image:url(../images/ico/slick_right_btn_on.png)}


/* solution */

	/* animation
	.visual.on .in .cont img,
	.visual.on .in .cont strong,
	.visual.on .in .cont p,
	.visual.on .in .cont a {top:0; opacity:1}
	.visual.on .in .phone1 {top:54px; opacity:1}
	.visual.on .in .phone2 {top:80px; opacity:1}

	.visual.on .in .cont strong {transition-delay:120ms}
	.visual.on .in .cont p {transition-delay:240ms}
	.visual.on .in .cont a {transition-delay:360ms}
	.visual .in .phone1 {transition-delay:480ms}
	.visual .in .phone2 {transition-delay:600ms} */

.solition_area {position:relative; z-index:4; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.solition_area.on {opacity:1}
.solition_area .in {padding-top:0}
.solition_area .section_title.blue {position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}

.desc{margin-top:95px;}
.desc.desc2{margin-top:114px;}
.desc .desc_header{font-size:24px;font-weight:bold;}
.desc .desc_body{margin-top:16px;font-size:16px;line-height:28px;color:#666666;}

.solition_list {position:relative; top:40px; width:950px; margin:0 auto; padding-top:11px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.solition_list li {position:relative; float:left; width:calc(33% - 62px); height:129px; margin-top:40px; text-align:center}
.solition_list li ~ li {margin-left:97px}
.solition_list li:nth-child(3n+1) {margin-left:0}

.solition_list li .content {position:absolute; width:100%; padding:20px 0; box-shadow:3px 0 13px rgba(0,0,0,0.05); border:2px solid transparent; background-color:#fff; transition:0.3s all}
.solition_list li .content div {height:1px; opacity:0; overflow:hidden; transition:0.3s all}
.solition_list li .content > div strong {display:block; margin-top:40px; font-size:16px; font-weight:400}
.solition_list li .content > div p {margin-top:35px; color:#999; font-size:12px; line-height:1.5}
.solition_list li.xbot .content > div p {margin-top:17px}

.solition_list li.on .content {padding-bottom:40px; z-index:1;}
.solition_list li.on .content div {opacity:1; height:159px; overflow:visible}
.solition_list li.on .text {display:none}

.solition_list li p {margin-top:120px; font-size:16px}
.solition_list li span {display:block; width:100%; height:62px; transition:0.5s background}

.solition_list .xauto span {background:url(../images/img/img_solution01.png) center center no-repeat; background-size:82px auto}
.solition_list .xbot span {background:url(../images/img/img_solution02.png) center center no-repeat; background-size:82px auto}
.solition_list .xsurvey span {background:url(../images/img/img_solution03.png) center center no-repeat; background-size:82px auto}
.solition_list .xpush span {background:url(../images/img/img_solution04.png) center center no-repeat; background-size:82px auto}
.solition_list .xboard span {background:url(../images/img/img_solution05.png) center center no-repeat; background-size:82px auto}
.solition_list .xtour span {background:url(../images/img/img_solution06.png) center center no-repeat; background-size:82px auto}

.solition_list .on.xauto span {background-image:url(../images/img/img_solution01_on.png)}
.solition_list .on.xbot span {background-image:url(../images/img/img_solution02_on.png)}
.solition_list .on.xsurvey span {background-image:url(../images/img/img_solution03_on.png)}
.solition_list .on.xpush span {background-image:url(../images/img/img_solution04_on.png)}
.solition_list .on.xboard span {background-image:url(../images/img/img_solution05_on.png)}
.solition_list .on.xtour span {background-image:url(../images/img/img_solution06_on.png)}

.solition_list .on.xauto .content{border-color:#aeda62}
.solition_list .on.xbot .content{border-color:#44c8f5}
.solition_list .on.xsurvey .content{border-color:#b36bb6}
.solition_list .on.xpush .content{border-color:#ffbf40}
.solition_list .on.xboard .content{border-color:#4bdbc8}
.solition_list .on.xtour .content{border-color:#ff6a9c}

.solition_list a {display:inline-block; width:120px; padding:4px; margin-top:40px; color:#666; text-align:center; border:1px solid #ddd; border-radius:12px}

	/* animation 
	.solition_list.on {transition-delay:120ms}
	.solition_area.on .section_title.blue,
	.solition_area.on .solition_list {top:0; opacity:1}
	*/

.introduce_area {/*min-height:920px;*/ opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.introduce_area.on {opacity:1}
.introduce_area .in {position:relative; /*min-height:897px;*/ min-height:786px; min-height:842px; padding-bottom:0px; padding-top:0; margin-top:60px}
.introduce_area .introduce {margin-top:119px;}
.introduce_area .introduce.xmall {min-height:816px;}
.introduce_area .introduce .intro_logo {width:88px;}
.introduce_area .introduce img {position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.introduce_area p {position:relative; top:40px; margin-top:47px; font-size:16px; color:#666; line-height:1.6; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.introduce_area .btn_area {margin-top:95px}
.introduce_area .btn_area li ~ li {margin-top:12px}
.introduce_area .btn_area li a{position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}


.introduce_area .phone {position:absolute; right:0; opacity:0;}
.introduce_area .phone1 {bottom:-100px; right:-100px; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.introduce_area .phone2 {bottom:244px; right:-170px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}

.introduce_area .link_demo{position:absolute; right:-22px; bottom:46px}
.introduce_area .link_demo li{float:left}
.introduce_area .link_demo li a{display:inline-block; width:158px; height:158px; padding-right:20px; padding-top:23px; line-height:30px; background:url('../images/img/bg-circle-red.png') left top; font-size:18px; color:#fff; text-align:center}
.introduce_area .link_demo li a.admin{margin-left:-14px; background:url('../images/img/bg-circle-black.png') left top}


.introduce_area.one_btn .phone1 {right:100px}
.introduce_area.one_btn .phone2 {right:0px}


	/* animation */
	.introduce_area.on .introduce img,
	.introduce_area.on p,
	.introduce_area.on .btn_area li a {top:0; opacity:1}
	.introduce_area.on .phone1 {bottom:-96px; bottom:-136px; right:175px; opacity:1}
	.introduce_area.on .phone2 {bottom:160px; bottom:120px; right:-80px; opacity:1}

	.introduce_area.on .introduce img {transition-delay:120ms}
	.introduce_area.on p {transition-delay:240ms}
	.introduce_area.on .phone1 {transition-delay:600ms}
	.introduce_area.on .phone2 {transition-delay:720ms}

	.introduce_area.on .btn_area li .red_line {transition-delay:360ms}
	.introduce_area.on .btn_area li .red_fill {transition-delay:480ms}
	.introduce_area.on .btn_area li .gray_fill {transition-delay:600ms}
	.introduce_area.on .btn_area li .default {transition-delay:720ms}

	.introduce_area.on .one_btn .btn_area li a.green_fill,
	.introduce_area.on .one_btn .btn_area li a.light_blue_fill,
	.introduce_area.on .one_btn .btn_area li a.purple_fill,
	.introduce_area.on .one_btn .btn_area li a.yellow_fill,
	.introduce_area.on .one_btn .btn_area li a.light_green_fill,
	.introduce_area.on .one_btn .btn_area li a.pink_fill {transition-delay:360ms}
	.introduce_area.on .one_btn .phone1 {transition-delay:240ms}
	.introduce_area.on .one_btn .phone2 {transition-delay:360ms}


/* 엑스몰 차별성 */
.server_setting {margin:20px auto 33px auto; }
.server_setting li {float:left; position:relative; width:33.33333333%;; height:168px; margin-top:36px}
.server_setting li strong {float:left; display:inline-block; width:168px; height:168px; margin-right:35px; line-height:166px; text-align:center; font-size:20px; color:#fff; font-weight:normal; border-radius:50%; background:#ff7d71}
.server_setting li div {display:flex; align-items:center; flex-wrap:wrap; height:168px; padding:20px 0;font-size:18px; color:#555555; line-height:30px;}
.server_setting li div p {width: 100%; color:#555; font-size:18px;}
.x_different .section_title {position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.x_different .server_setting li {position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}

.x_different .txt1,
.x_different .txt2,
.x_different .table {position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.x_different .table {transition:0.5s all}

.table {position:relative; top:40px; width:880px; margin:57px auto 38px; opacity:0}
.table table {border-bottom:2px solid #666}
.table table thead th {height:60px; font-size:18px; font-weight:normal; color:#fff; background:#ff7d71}
.table table tbody th,
.table table tbody td {height:60px; text-align:center; font-size:16px; color:#666; border-bottom:1px solid #ccc}
.table table tbody th {font-weight:normal}
.table table tbody th span {display:block; font-size:14px}
.table table tbody td i {display:inline-block; width:18px; height:18px; margin-top:10px; border-radius:50%; text-indent:-9999px; background:#666}
.table table tbody td i.light{background-color:#9f9f9f;}

	/* animation */
	.x_different.on .section_title,
	.x_different.on .server_setting li,
	.x_different.on .filed_txt,
	.x_different.on .table {top:0; opacity:1}

	.x_different.on .server_setting li.li_1 {transition-delay:120ms}
	.x_different.on .server_setting li.li_2 {transition-delay:240ms}
	.x_different.on .server_setting li.li_3 {transition-delay:360ms}
	.x_different.on .server_setting li.li_4 {transition-delay:480ms}
	.x_different.on .server_setting li.li_5 {transition-delay:600ms}
	.x_different.on .server_setting li.li_6 {transition-delay:720ms}

	.x_different.on .txt1 {transition-delay:840ms}
	.x_different.on .table {transition-delay:960ms}
	.x_different.on .txt2 {transition-delay:1080ms}


/* 특장점 */
.number_list {position:relative; left:0px; margin-top:11px;  margin-left:-25px; margin-right:-25px; overflow:hidden}
.number_list > li {float:left; width:33.333%; min-height:206px; margin-top:82px; padding-left:25px; padding-right:25px;}

.number_list.line_3{ margin-top:33px}
.number_list.line_4{ margin-top:16px; margin-left:-20px; margin-right:-20px;}
.number_list.line_4 > li {width:25%; padding-left:20px; padding-right:20px;}
.number_list > li span {line-height:1; color:#ff7d71; font-size:48px; font-weight:bold}
.xauto .number_list > li span {color:#acd676}
.xbot .number_list > li span {color:#5f9df1}
.xsurevy .number_list > li span {color:#b373b9}
.xpush .number_list > li span {color:#f8bf52}
.xboard .number_list > li span {color:#55daca}
.xtour .number_list > li span {color:#f06e9c}
.number_list > li p {margin-top:26px; margin-bottom:14px; color:#555555; font-size:16px}
.number_list > li p.list_title {margin-top:26px; margin-bottom:14px; color:#222; font-size:13px}

.number_list li ul li {position:relative; padding-left:14px; margin-top:4px; line-height:28px; font-size:16px; color:#666}
.number_list li ul li:after {content:''; display:inline-block; position:absolute; left:0; top:13px; width:3px; height:3px; border-radius:50%; background:#ff7d71}

.number_list.line_1 > li {margin-top:82px}
.number_list.line_1 > li p {margin-bottom:0}
.number_list.line_2 > li {margin-top:102px;}
.number_list.line_3 li{margin-top:60px}
.number_list.line_4 > li {margin-top:76px; min-height:160px;}
.number_list.line_4 > li p {margin-top:24px; margin-bottom:0}

.number_list.xmall{}

/*
.advantage {padding-bottom:90px;}
.advantage.advantage_xmall {padding-bottom:32px;}
.advantage.advantage_xauto {padding-bottom:106px;}
.advantage.advantage_xbot {padding-bottom:28px;}
.advantage.advantage_xsurvey {padding-bottom:60px;}
.advantage.advantage_xpush {padding-bottom:35px;}
.advantage.advantage_xboard {padding-bottom:55px;}
.advantage.advantage_xtour {padding-bottom:34px;}
*/


.advantage {padding-bottom:90px;}
.advantage.advantage_xmall {padding-bottom:32px;}
.advantage.advantage_xauto {}
.advantage.advantage_xbot {padding-bottom:26px;}
.advantage.advantage_xsurvey {padding-bottom:26px;}
.advantage.advantage_xpush {padding-bottom:26px;}
.advantage.advantage_xboard {padding-bottom:46px;}
.advantage.advantage_xtour {padding-bottom:26px;}




.advantage .in {padding-bottom:0;}

.section_title,
.number_list li {position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}




.section_title.section_title_solution{opacity:1; margin-top:40px}
.on .number_list li.li_1 {transition-delay:80ms}
.on .number_list li.li_2 {transition-delay:160ms}
.on .number_list li.li_3 {transition-delay:240ms}
.on .number_list li.li_4 {transition-delay:320ms}
.on .number_list li.li_5 {transition-delay:400ms}
.on .number_list li.li_6 {transition-delay:480ms}
.on .number_list li.li_7 {transition-delay:560ms}
.on .number_list li.li_8 {transition-delay:640ms}
.on .number_list li.li_9 {transition-delay:720ms}
.on .number_list li.li_10 {transition-delay:800ms}
.on .number_list li.li_11 {transition-delay:860ms}

.on .number_list.line_1 li.li_1 {transition-delay:120ms}
.on .number_list.line_1 li.li_2 {transition-delay:240ms}
.on .number_list.line_1 li.li_3 {transition-delay:360ms}

	/* animation */
	.on .section_title,
	.on .number_list li {top:0; opacity:1}


/* 구축사례 */
.x_sli {position:relative; overflow:hidden; padding-bottom:30px}
.x_sli .shadow {position:absolute; top:0; width:1920px; height:990px; opacity:0; background:#fff url(../images/img/img_shadow.png) center top 374px no-repeat; transition:1s opaicty}
.x_sli .in {width:1280px; max-width:1280px; padding-bottom:0px}
.x_sli .section_title,
.x_sli .obj,
.x_sli h3,
.x_sli .list,
.x_sli .label{position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}


	/* animation */
	.x_sli.on .section_title,
	.x_sli.on .obj,
	.x_sli.on h3,
	.x_sli.on .list,
	.x_sli.on .label {top:0; opacity:1}
	.x_sli.on .shadow {opacity:1}

	.x_sli.on .obj {transition-delay:120ms}
	.x_sli.on h3 {transition-delay:240ms}
	.x_sli.on .list {transition-delay:360ms}
	.x_sli.on .label {transition-delay:480ms}

@media (max-width:1280px){
	.section_nav {display:none;}
}


        @media (max-width:640px){
            .mo {display:block}
            .pc {display:none}
            .in {padding:40px 15px 40px;}
            .wrap {min-width:auto}
            .header .in{min-width:0;}
            .section_title span {padding-bottom:16px; font-size:16px}
            .section_title span:after {left:15%; bottom:0; width:70%; border-bottom:1px solid #ff7d71}

            .sketch_bg {display:inline; color:#ff7d71;}
            .sketch_bg:after {content:none}
            .sketch_bg.green {color:#97c55a}
            .sketch_bg.light_blue {color:#4d8ee6}
            .sketch_bg.purple {color:#b15ab9}
            .sketch_bg.yellow {color:#e5ae3e}
            .sketch_bg.light_green {color:#4bbdaf}
            .sketch_bg.pink {color:#f06e9c}

            .btn {padding:15px 0; font-size:14px}
            .btn .ico_arrow {display:inline-block; width:11px; height:9px; margin-left:7px; background-size:11px 9px}
            .btn .ico_down {display:inline-block; width:11px; height:10px; margin-left:7px; background-size:11px 10px}

            .header {min-width:auto; border-bottom:0; padding-top:2px; z-index:80}
            .header .in {padding:0}
            .header h1 {float:left; width:57px; height:16px; margin-left:0; padding:18px 0 18px 15px; background-size:42px 16px}
            .header .nav {display:none}


            .footer {padding:35px 0; font-size:12px}
            .footer .in {padding:30px 0}
            .footer .mail img {width:36px; height:36px}
            .footer .in > p {margin-top:5px}
            .footer .mail + p {margin-top:15px}
            .footer .call {margin-top:5px}
            .footer .call p a,
            .footer .mail_d a {display:inline-block; margin-top:-3px}
            .footer .call p:first-child {position:relative; padding-right:4px}
            .footer .call p:first-child:after {height:11px}

            .container {padding-top:52px; overflow:hidden}

            .about_nav_wrap{margin-top:73px}
            .about_nav_wrap.on .about_nav_bg{top:54px}
            .about_nav li a {padding:12px 0; font-size:11px}

            .x_sli .shadow{background:none}

            /* 슬라이드 공통 */
            .sli {width:100%; margin-top:30px; padding-bottom:35px; overflow:visible}
            .sli .obj {float:none; width:100%; margin-top:0; padding:0 15px; background:#fff url(../images/img/img_shadow.png) center bottom 43% no-repeat}
            .sli .slide_area .info {width:100%; padding:0 30px; margin-top:0;}
            .sli .slide_area .info h3 {margin-top:18px; font-size:16px}
            .sli .slide_area .info h3:after {width:15px; margin:16px 0}
            .sli .slide_area .info ul li {padding-bottom:0; font-size:13px; color:#222; font-weight:300}
            .sli .slide_area .info ul li ~ li {margin-top:6px}
            .sli .slide_area .info .label {margin-top:0px}
            .sli .slide_area .info .label span {height:20px; line-height:18px; padding:0 7px; font-size:12px}
            .sli .slide_area .info .label span ~ span {margin-left:4px}
            .sli .m_img {margin-left:9%}
            

            .slide_paging {bottom:0; width:100%; font-size:11px}
            .slick-arrow {right:38%; bottom:-36px; width:10px; height:19px}
            .slick-prev {right:59%; background-size:10px 19px}
            .slick-next {background-size:10px 19px}
            .slide_paging .min{font-size:14px; }

            .x_sli .in {padding:40px 0 40px}
            /*.x_different.on .server_setting li.li_6 div{padding:0; font-size:13px; line-height:normal}*/
            
            .desc{margin-top:30px}
            .desc.desc2{margin-top:36px}
            .desc .desc_header{font-size:14px}
            .desc .desc_body{margin-top:12px; font-size:13px; line-height:18px}
            .x_different.on .server_setting li{overflow:hidden}

            /* solution */
            /* .visual{height:500px; background:#44c8f5; background:-moz-linear-gradient(top,  #44c8f5 0%, #5bffe2 100%); background:-webkit-linear-gradient(top, #44c8f5 0%,#5bffe2 100%); background:linear-gradient(to bottom, #44c8f5 0%,#5bffe2 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#44c8f5', endColorstr='#5bffe2',GradientType=0)}
            .visual:after {content:''; display:block; position:absolute; right:0; bottom:0; z-index:3; border-top:90px solid transparent; border-right:640px solid #fff}

            .visual .in {height:100%; padding:0 30px}
            .visual .in .cont {padding-top:30px}
            .visual .in .cont img {width:55px}
            .visual .in .cont strong {margin-top:25px; font-size:21px}
            .visual .in .cont p {margin-top:15px; font-size:12px}
            .visual .in .cont a {margin-top:20px; font-size:12px}

            .visual .in .phone1 {right:4%; top:290px; width:60%}
            .visual .in .phone2 {right:24%; top:310px; width:60%}
            .visual .in .word {right:-25px; top:30px; width:300px} */

                /* animation */
                /* .visual.on .in .phone1 {top:250px}
                .visual.on .in .phone2 {top:270px} */
            .section_title.section_title_solution{margin-top:0}
            .solition_area .in {padding:0 15px}

            .solition_list {width:100%; padding-top:11px}
            .solition_list li {float:left; width:calc(50% - 7px); height:253px; margin-top:14px}
            .solition_list li ~ li {margin-left:14px}
            .solition_list li:nth-child(3n+1) {margin-left:14px}
            .solition_list li:nth-child(2n+1) {margin-left:0}

            .solition_list li .content {position:static; width:100%; padding:20px 5px}
            .solition_list li .content > div strong {margin-top:15px; font-size:12px}
            .solition_list li .content > div p {margin-top:17px; font-size:11px}
            .solition_list li.xbot .content > div p {margin-top:17px}

            .solition_list li.on .content {padding-bottom:20px}
            .solition_list li.on .content div {height:129px}
            .solition_list li.on .text {display:none}

            .solition_list li p {margin-top:120px; font-size:16px}
            .solition_list li span {display:block; width:100%; height:62px; transition:0.5s background}

            .solition_list .xauto span {background-size:50px auto}
            .solition_list .xbot span {background-size:50px auto}
            .solition_list .xsurvey span {background-size:50px auto}
            .solition_list .xpush span {background-size:50px auto}
            .solition_list .xboard span {background-size:50px auto}
            .solition_list .xtour span {background-size:50px auto}

            .solition_list a {position:absolute; bottom:20px; left:50%; margin-left:-55px; width:110px; margin-top:20px; font-size:12px}

            .introduce_area {min-height:auto}
            .introduce_area .in {min-height:auto; padding-bottom:68%; padding-bottom:300px; margin-top:0; padding-top:30px; overflow:hidden}

            .introduce_area .introduce {margin-top:40px; text-align:center}
            .introduce_area .introduce.xmall{min-height:0}
            .introduce_area .introduce .intro_logo {width:70px}
            .introduce_area .introduce img {width:70px; top:40px}
            .introduce_area p {margin-top:30px; font-size:13px;line-height:1.5; text-align:left}
            .introduce_area .btn_area {margin-top:25px; text-align:center}
            .introduce_area .btn_area li {display:inline-block; float:none; width:calc(50% - 10px); margin-top:10px}
            .introduce_area .btn_area li ~ li {margin-top:10px; margin-left:10px}
            .introduce_area .btn_area li:nth-child(2n+1) {margin-left:0}
            .introduce_area .btn_area li a{display:block; position:relative; top:40px; width:100%; min-width:auto; font-size:14px}

            .introduce_area .phone1 {bottom:-50px; right:7%; width:72%; width:270px}
            .introduce_area .phone2 {bottom:-30px; right:-15%; width:72%; width:270px}

            .introduce_area.one_btn .phone1 {right:4%}
            .introduce_area.one_btn .phone2 {right:-20%; bottom:-30px}

                /* animation */
                /*.introduce_area.on .phone1 {bottom:0; bottom:-27%; right:14%; right:auto; left:50%; margin-left:-130px;}
                .introduce_area.on .phone2 {bottom:-10%; right:-23%; right:auto; left:50%;}
                .introduce_area.on.one_btn .phone1 {right:14%; right:auto; left:50%; margin-left:-130px;}
                .introduce_area.on.one_btn .phone2 {right:-25%; bottom:-12%; right:auto; left:50%;}
                */

                .introduce_area.on .phone1 {right:auto; bottom:-166px; left:50%; margin-left:-144px;}
                .introduce_area.on .phone2 {bottom:-70px; right:auto; left:50%;}
                .introduce_area.on.one_btn .phone1 {right:auto; bottom:-166px; left:50%; margin-left:-144px;}
                .introduce_area.on.one_btn .phone2 {bottom:-70px; right:auto; left:50%;}

            /* 엑스몰 차별성 */
            .server_setting {width:100%; margin:15px auto; padding-left:0}
            .server_setting li {width:50%; height:70px; margin-top:20px}
            .server_setting li strong {width:70px; height:70px; margin-right:13px; line-height:70px; font-size:14px}
            .server_setting li div {height:70px; padding:0px 0; font-size:12px; line-height:18px}
            .server_setting li div p {font-size:10px}
            .x_different .filed_txt {margin-top:20px; text-align:left; font-size:14px; line-height:1.5}

            .table {width:100%; margin:18px auto 0px}
            .table table thead th {height:40px; font-size:14px}
            .table table tbody th,
            .table table tbody td {height:40px; font-size:11px}
            .table table tbody th span {font-size:12px}
            .table table tbody td i {width:8px; height:8px}


            /* 특장점 */
            .number_list {position:relative; left:0; margin-top:0; margin-left:0; margin-right:0; padding-left: 25px;padding-right: 15px;overflow: visible;}
            .xmall .on .number_list{background:url(../images/img/bg_mobile_line_xmall.png) repeat-y 5px top;}
            .xauto .on .number_list{background: url(../images/img/bg_mobile_line_xauto.png) repeat-y 5px top;}
            .xbot .on .number_list{background: url(../images/img/bg_mobile_line_xbot.png) repeat-y 5px top;}
            .xsurevy .on .number_list{background: url(../images/img/bg_mobile_line_xsurevy.png) repeat-y 5px top;}
            .xpush .on .number_list{background: url(../images/img/bg_mobile_line_xpush.png) repeat-y 5px top;}
            .xboard .on .number_list{background: url(../images/img/bg_mobile_line_xboard.png) repeat-y 5px top;}
            .xtour .on .number_list{background: url(../images/img/bg_mobile_line_xtour.png) repeat-y 5px top;}

            .number_list:after {display:block;content:'';width:1px;height:1000px;position:absolute;left:5px;top:0;}
            .number_list > li {float:none; width:100%; min-height:auto; margin-top:30px; padding-left:0; padding-right:0}
            .number_list > li span {display:none; font-size:30px; position: absolute;font-size: 10px;border: 1px solid #ff7d71;border-radius: 50%;display: inline-block;width: 20px;height: 20px;text-align: center;line-height: 17px;left: -30px;top:-2px;background-color:#fff;}

            .xauto .number_list > li span {border-color:#acd676;color:#acd676}
            .xbot .number_list > li span {border-color:#5f9df1;color:#5f9df1;}
            .xsurevy .number_list > li span {border-color:#b373b9;color:#b373b9}
            .xpush .number_list > li span {border-color:#f8bf52;color:#f8bf52}
            .xboard .number_list > li span {border-color:#55daca;color:#55daca}
            .xtour .number_list > li span {border-color:#f06e9c;color:#f06e9c}


            .number_list > li p {margin-top:10px; margin-bottom:10px; font-size:14px}
            .number_list > li p.list_title{margin-top:0; margin-bottom:7px}
            .number_list li ul li {padding-left:7px;line-height:1.4; font-size:12px}
            .number_list.line_1 > li {margin-top:30px}
            .number_list.line_1 > li p {margin-bottom:0}
            .number_list.line_2 > li {margin-top:30px;}
            .number_list.line_3 li{margin-top:30px}
            .number_list.line_4{ margin-left:0; margin-right:0}
            .number_list.line_4 > li {margin-top:30px; width:100%; min-height:auto; padding-left:0; padding-right:0}
            .number_list.line_4 > li p {margin-top:10px; margin-bottom:0}
            .number_list li ul li:after{top:8px}
            .advantage {min-height:auto; padding-bottom:0}
            .advantage.advantage_xmall{padding-bottom:0}
            .advantage .in {padding:40px 30px 40px}
            .advantage .in {padding: 40px 20px 40px;}

            .section_title.section_title2{margin-top:-19px}
            /*.x_different.on .server_setting li.li_6{width:100%}*/

            .x_sli .in{width:auto; max-width:auto }


            /* 구축사례 */
            .x_sli .shadow {background-position:center top 0px}


            

        } /* media 640px */



@media (max-width:414px){

	/* 엑스몰 차별성 */
    /*
    .server_setting {width:100%; margin:15px auto; padding-left:0}
	.server_setting li {width:50%; height:75px; margin-top:20px}
	.server_setting li strong {width:70px; height:70px; margin-right:10px; line-height:70px; font-size:12px}
	.server_setting li div {height:70px; padding:0px 0; font-size:11px; line-height:normal}
	.server_setting li div p {font-size:10px}
    .x_different .filed_txt {margin-top:20px; text-align:left; font-size:14px; line-height:1.5}
    */

}/* media 414px */
    

@media (max-width:414px){
    .server_setting li strong{margin-right:6px;}

	/*.x_sli .shadow {background-position:center top -280px}*/

}/* media 414px */


@media (max-width:400px){
    .server_setting {width:100%; margin:15px auto; padding-left:0}
    .server_setting li strong{margin-right:3px;line-height:70px;}
    .x_different.on .server_setting li.li_6{width:100%}
    .x_different.on .server_setting li {width:45%}
    .x_different.on .server_setting li.even {width:55%}
    .x_different .server_setting li{transition:0.5s all cubic-bezier(0.51, 0.45, 0.61, 0.74)}

	/*.introduce_area .in {padding-bottom:130%;}
	.x_sli .shadow {background-position:center top -300px;}*/

} /* media 400px */
@media (max-width:359px){
    .x_different.on .server_setting li.li_6{width:100%}
    /*.server_setting {width:100%; margin:15px auto; padding-left:0}
    .server_setting li strong{margin-right:3px;line-height:70px;}
	.introduce_area .in {padding-bottom:130%;}
	.x_sli .shadow {background-position:center top -300px;}*/

} /* media 375px */