@charset "utf-8";

/* 공통 */
body.fix {position:fixed; width:100%; height:100%; overflow:hidden}
body.fix .wrap {position:fixed; width:100%; height:100%}

.wrap {min-width:1280px; overflow:hidden;}
.bg_gray {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:30px; 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}

.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:320px; padding:33px 0; font-size:24px; 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:1280px; width:100%; margin:0 auto; padding:115px 0 80px}

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


.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.png) center center no-repeat; background-size:16px 14px}
.header .mo_nav {display:none; position:fixed; top:0; width:100%; height:100%; background-color:#44c8f5}
.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_header_close.png) center center no-repeat; background-size:15px}
.header .mo_nav ul {padding-left:30px;}
.header .mo_nav li:first-child {margin-top:15px}
.header .mo_nav li {margin-top:30px}
.header .mo_nav li a {font-size:21px; color:#a9e2fa}
.header .mo_nav li.on a {color:#fff; font-weight:600}

.header.on {background-color:rgba(255,255,255,0.8)}
.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}

.section_nav {position:fixed; left:65px; top:50%; z-index:10; margin-top:-201px}
.section_nav li {position:relative}
.section_nav li:after {content:''; display:block; clear:both}
.section_nav li:before {content:''; display:block; position:absolute; left:11px; bottom:14px; width:2px; height:46px; background:url(../images/img/img_nav_line.png) center center no-repeat}
.section_nav li:first-child:before {content:none}
.section_nav li ~ li{margin-top:37px}
.section_nav li a {display:table}

.section_nav li p {display:table-cell; vertical-align:middle; opacity:0.4}
.section_nav li p:first-child {width:42px; padding-left:8px; opacity:1}
.section_nav li span {display:block; margin-right:24px; width:8px; height:8px; border-radius:50%; background-color:rgba(0,0,0,0.25)}
.section_nav li.on p {font-size:18px; color:#44c8f5; opacity:1}
.section_nav li.on span {transform:scale(3); background-color:#44c8f5; animation:dots 1s linear alternate infinite}
.section_nav li:first-child.on span,
.section_nav li:last-child.on span {background-color:rgba(0,0,0,0.65)}
.section_nav li:first-child.on p,
.section_nav li:last-child.on p {color:rgba(0,0,0,0.65)}

@keyframes dots {
	0% {transform:scale(1)}
	50% {transform:scale(1.5)}
	100% {transform:scale(2)}
}

.container {padding-top:80px}

/* 슬라이드 공통 */
.sli {margin-top:115px; position:relative; 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 {font-weight:700; color:#222; font-size:26px}
.sli .slide_area .info h3:after {content:''; display:block; width:30px; height:2px; margin:60px 0; background:#adadad}
.sli .slide_area .info ul li {color:#666; font-size:18px;}
.sli .slide_area .info ul li ~ li {margin-top:6px}
.sli .slide_area .info .label {margin-top:40px; overflow:hidden}
.sli .slide_area .info .label span {float:left; height:22px; line-height:19px; padding:0 9px; color:#44c8f5; border:1px solid #44c8f5}
.sli .slide_area .info .label span ~ span {margin-left:4px}

.slide_paging {position: absolute; right:0; bottom:7px; width:130px; text-align:center; font-size:18px; color:#666}
.slide_paging .min {color:#44c8f5}

.slick-arrow {display:inline-block; position:absolute; right:0; bottom:0; z-index:1000; width:20px; height:38px; text-indent:-9999px}
.slick-prev {right:110px; 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 */
.visual{position:relative; height:613px; overflow:hidden; background:url(../images/img/img_visual_bg.jpg) center top no-repeat; opacity:1; transition:all 1s}
.visual:after {content:''; display:block; position:absolute; right:0; bottom:0; z-index:3; border-top:340px solid transparent; border-right:1736px solid #fff}


.visual .in {position:relative; padding-top:0}
.visual .in .cont {padding-top:116px; color:#fff}
.visual .in .cont img {display:block; position:relative; top:40px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.visual .in .cont strong {display:block; position:relative; top:40px; margin-top:50px; font-size:36px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.visual .in .cont p {position:relative; top:40px; z-index:4; margin-top:24px; font-size:18px; line-height:1.5; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.visual .in .cont a {display:inline-block; position:relative; top:40px; z-index:4; margin-top:25px;  min-width:160px; padding:15px 0; color:#fff; font-size:16px; text-align:center; background-color:rgba(32,125,149,0.6); opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.visual .in .pos {position:absolute}
.visual .in .phone1 {right:100px; top:130px; z-index:1; transform:rotate(30deg); opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.visual .in .phone2 {right:270px; top:180px; z-index:1; transform:rotate(30deg); opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}
.visual .in .word {right:430px; top:70px; z-index:1;}


	/* 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)}

.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:1000px; 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:1000px; padding-bottom:65px; margin-top:60px}
.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:58px; font-size:20px; 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:60px}
.introduce_area .btn_area li ~ li {margin-top:20px}
.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:-70px; opacity:0; transition:0.5s all cubic-bezier(0.56, 0.15, 0.29, 1.04)}

.introduce_area.one_btn .phone2 {right:-100px}


	/* 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:0; right:150px; opacity:1}
	.introduce_area.on .phone2 {bottom:160px; right:-120px; opacity:1}
	.introduce_area.on.one_btn .phone2 {right:-150px}

	.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 {width:1000px; margin:60px auto; padding-left:106px}
.server_setting li {float:left; position:relative; width:50%; height:168px; margin-top:20px}
.server_setting li strong {float:left; display:inline-block; width:168px; height:168px; margin-right:20px; 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;}
.server_setting li div p {line-height:1; width: 100%; color:#eb7165; font-size:24px;}
.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:115px auto 55px; opacity:0}
.table table {border-bottom:2px solid #666}
.table table thead th {height:60px; font-size:20px; font-weight:normal; color:#fff; background:#ff7d71}
.table table tbody th,
.table table tbody td {height:60px; text-align:center; font-size:20px; 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}

	/* 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:120px; margin-top:25px; overflow:hidden}
.number_list > li {float:left; width:33.333%; min-height:206px; margin-top:82px}
.number_list > li span {line-height:1; color:#ff7d71; font-size:60px; 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:35px; margin-bottom:18px; color:#222; font-size:20px}

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

.number_list.line_1 > li {margin-top:310px}
.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:12px; min-height:160px;}
.number_list.line_4 > li p {margin-top:25px; margin-bottom:0}

.advantage {min-height:1000px}
.advantage .in {padding-top:140px}

.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)}

.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}
.x_sli .shadow {position:absolute; top:0; width:1920px; height:932px; opacity:0; background:#fff url(../images/img/img_shadow.png) center top 70px no-repeat; transition:1s opaicty}

.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}

	.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}
	.header .in {padding:0}
	.header h1 {float:left; width:57px; height:16px; padding:18px 0 18px 15px; background-size:42px 16px}
	.header .nav {display:none}

	.footer {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}

	/* 슬라이드 공통 */
	.sli {margin-top:30px; padding-bottom:35px; overflow:visible}
	.sli .obj {float:none; width:100%; padding:0 15px}
	.sli .slide_area .info {width:100%; padding:0 30px; margin-top:0;}
	.sli .slide_area .info h3 {font-size:17px}
	.sli .slide_area .info h3:after {width:15px; margin:16px 0}
	.sli .slide_area .info ul li {font-size:14px}
	.sli .slide_area .info ul li ~ li {margin-top:6px}
	.sli .slide_area .info .label {margin-top:20px}
	.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:12px}
	.slick-arrow {right:38%; bottom:-36px; width:10px; height:19px}
	.slick-prev {right:59%; background-size:10px 19px}
	.slick-next {background-size:10px 19px}

	.x_sli .in {padding:40px 0 40px}


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

	.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:125%; margin-top:0; padding-top:30px; overflow:hidden}

	.introduce_area .introduce {text-align:center}
	.introduce_area .introduce img {width:70px; top:40px}
	.introduce_area p {margin-top:30px; font-size:14px;line-height:1.5; text-align:left}
	.introduce_area .btn_area {margin-top:25px}
	.introduce_area .btn_area li {float:left; 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:84%}
	.introduce_area .phone2 {bottom:115px; right:-15%; width:84%}

	.introduce_area.one_btn .phone2 {right:-20%; bottom:111px}

		/* animation */
		.introduce_area.on .phone1 {bottom:0; right:14%}
		.introduce_area.on .phone2 {bottom:75px; right:-23%}
		.introduce_area.on.one_btn .phone2 {right:-27%; bottom:71px}



	/* 엑스몰 차별성 */
	.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:75px; height:75px; margin-right:15px; line-height:75px; font-size:14px}
	.server_setting li div {height:75px; padding:10px 0}
	.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:30px auto 20px}
	.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:static; left:0; margin-top:0}
	.number_list > li {float:none; width:100%; min-height:auto; margin-top:30px}
	.number_list > li span {font-size:30px}
	.number_list > li p {margin-top:10px; margin-bottom:10px; font-size:14px}
	.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 > li {margin-top:30px; min-height:auto}
	.number_list.line_4 > li p {margin-top:10px; margin-bottom:0}

	.advantage {min-height:auto}
	.advantage .in {padding:40px 30px 40px}


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

} /* media 640px */

@media (max-width:414px){

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

}/* media 640px */


@media (max-width:375px){


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

} /* media 375px */