@charset "utf-8";

/*mainBg*/
.mainBg { height:648px; }

.mainBg { position: relative; width: 100%; height:648px; margin: 0 auto; }

.mainBg ul li { width:100%; height:648px; display:block; position:relative;  }
.mainBg ul li.slide1 { background:url(../images/bg1.jpg) center center no-repeat; }
.mainBg ul li.slide2 { background:url(../images/bg4.jpg) center center no-repeat; }
.mainBg ul li.slide3 { background:url(../images/bg2.jpg) center center no-repeat; }
.mainBg ul li.slide4 { background:url(../images/bg3.jpg) center center no-repeat; }
.mainBg ul li span { display:block; text-align:center;  width:100%; }
.mainBg ul li .text { margin-top:3%; color:#fff; font-size:2em; line-height: 1.6em; 
	-moz-text-shadow: 2px 2px 10px #333;
	-webkit-text-shadow: 2px 2px 10px #333;
	text-shadow: 2px 2px 10px #333;}
.mainBg ul li .text em { font-style: normal; display:block; } 
.mainBg ul li .text em.point1 { font-size:1.5em; line-height: 2em; }
.mainBg ul li .text em.point2 { font-size:2.3em; line-height: 2em; }
.mainBg ul li .imgBox { position:absolute; bottom:5%; left:0; }
.mainBg .inblock { display:inline; }


/*content1, content2, content3*/
.content1 { overflow:hidden; width:1000px; margin:0 auto; padding:72px 0; }
.content1 dl { float:left; width:33.3%; height:326px; padding:0 4%; border-right:solid 1px #cdcdcd; position:relative;}
.content1 dl:last-child { border-right:none; padding-right:0; }
.content1 dt { font-size:2em; }
.content1 dd { margin-top:20px; }
.content1 dd.num { background:url(../images/icon1.png) center 10px no-repeat; padding-top:150px; /*color:#33b5e5;*/ font-weight: 900; font-size:3em; text-align:center; }
.content1 textarea { border:solid 1px #dcdcdc; border-radius:10px; padding:10px; width:100%; height:100px;}
/*.content1 dd.imgpd { margin-top:35px; }*/
.content1 dd.imgpd .kakao_pc { display:block; }
.content1 dd.imgpd .kakao_m { display:none; }
.content1 dd.imgpd img { position:absolute; bottom:0; left:10%; width:290px; }
.content1 dd.btnBox { display:block; }
.content1 .inblock { display:block; }

.content2 { background:#e5ebf0;  padding:72px 0; }
.content2 div { overflow:hidden; width:1000px; margin:0 auto; }
.content2 dl { float:left; width:25%; text-align:center; padding-top:350px; }
.content2 dl:nth-child(1) { background:url(../images/kmc-z601-1.png) center top no-repeat; background-size: 250px;}
.content2 dl:nth-child(2) { background:url(../images/ktc-k500-1.png) center top no-repeat; background-size: 250px;}
.content2 dl:nth-child(3) { background:url(../images/P2C100.png) center top no-repeat; background-size: 250px;}
.content2 dl:nth-child(4) { background:url(../images/kiosk_main.png) center top no-repeat; background-size: 250px;}
.content2 dt { /*color:#0162a0;*/ font-size:1.5em; }
.content2 dt span { font-weight:900; font-size:14px; color:#333; padding:10px 0;}
.content2 dd.txtBox { min-height:50px; }
.content2 dd.btnBox { margin-top:20px; }
.content2 dd.btnBox a { padding:10px 40px;  }
.content2 .inblock { display:block; }

.content3 { background:url(../images/branch_bg.png) center center no-repeat; padding:150px 0px; }
.content3 dl { width:1000px; margin:0 auto; color:#fff; padding-left:100px; }
.content3 dt { font-size:2.5em; font-weight: 700;  line-height:1.8em; }
.content3 dd { font-size:1.8em;  line-height:1.5em; }
.content3 dd.btnBox2 { margin-top:20px; font-size:1em; }
.content3 dd.btnBox2 a { padding:0 30px; }

.content4 { overflow:hidden; width:1000px; margin:0 auto; padding:72px 0; }
.content4 h4 { text-align:center; font-size:2em; }
.content4 dl { float:left; width:33.3%; min-height:110px; margin-top:50px; padding-left:135px; /*margin-right:8%;*/ }
.content4 dt { font-size:1.5em; /*color:#0162a0;*/ margin-bottom:15px; }
.content4 dd { line-height: 1.8em; }
.content4 dl.one { background:url(../images/no1.png) 10% 15px no-repeat; background-size:97px;}
.content4 dl.two { background:url(../images/no2.png) 10% 15px no-repeat; background-size:97px; }
.content4 dl.three { background:url(../images/no3.png) 10% 15px no-repeat; background-size:90px; }
.content4 .inblock { display:block; }

.content5 { background:url(../images/bg4.png) center center no-repeat; padding:65px 0; }
.content5 h4 { text-align:center; font-size:2em; color:#fff; }
.content5 p { text-align:center; }
.content5 .btnBox { display:inline-block; width:12%; padding:10px 0px; }

.content5 .example { padding:50px 0; position:relative; overflow: hidden; }
.content5 .example .exBox { background:#fff; max-height:380px; outline: none; margin:0 10px; padding:10px; border-radius: 10px; position:relative; float:left; }

.content5 .example .exBox dl dt { text-align:center; margin-bottom:0px; position:relative;}
/*.content5 .example .exBox dl dt img { width:100%; height:240px; }*/
.content5 .example .exBox dl dd { padding:7px 15px 0; }
.content5 .example .exBox dl dd p.title { text-align:left; font-size:18px; line-height:30px; }
.content5 .example .exBox dl dd p.date { text-align:left; font-size:13px; color:#777; padding-top:3px; }
.content5 .example .exBox dl dd p.text { 
	display:inline-block; 
	overflow: hidden;
	white-space: normal;
	font-size:14px;
	line-height: 1.6em;
	height: 3.2em;
	text-align: left;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
}

/* Slider */
.slider { width: 70%;  margin: 0 auto; }
.slick-slide { margin: 0px 20px; }
.slick-slide img { width: 100%; }

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;    

    width: 49px;
    height: 100px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    /*background: transparent;*/
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
   outline: none;
    opacity: 1;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'FontAwesome';
    font-size: 40px;
    line-height: 40px;
    color:#ccc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev { left: -22%; background:url(../images/circle_L.png) left center no-repeat; background-size:100%; }
[dir='rtl'] .slick-prev { right: -22%; left: auto;  }
.slick-prev:before { content: '\f104';}
[dir='rtl'] .slick-prev:before { content: '\f105';}

.slick-next { right: -22%; background:url(../images/circle_R.png) right center no-repeat; background-size:100%; }
[dir='rtl'] .slick-next { right: auto; left: -22%;}
.slick-next:before { content: '\f105';}
[dir='rtl'] .slick-next:before { content: '\f104';}

.slick-slider { position: relative; display: block; box-sizing: border-box; }

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none;}
.slick-list.dragging { cursor: pointer; cursor: hand;}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track { position: relative; top: 0;left: 0; display: block;}
.slick-track:before,
.slick-track:after{
    display: table;
    content: '';
}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}

.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block;}
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img{ pointer-events: none;}
.slick-initialized .slick-slide { display: block;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide { display: block;    height: auto;    border: 1px solid transparent;}
.slick-arrow.slick-hidden { display: none;}

@media (max-width: 1199px) {
	.content1, .content2 div { width:100%; }
	.content1 dl { height:320px; }		
	.content1 dd.num { background-position:center 0; padding-top:130px; }
	.content1 dd.imgpd img { width:70%; }

	.content3 dl { width:95%; padding-left:5%; }
	.content4 { width:96%; padding:padding:72px 2%; }
	.content4 dl { float:left; width:33.3%; margin-top:50px; padding-left:13%; margin-right:0; }
	.content4 dl.one, .content4 dl.two, .content4 dl.three { background-size:26%; background-position:10% 15px; }

	.content5 .example .exBox dl dd p.title { font-size:16px; }
	.content5 .example .exBox dl dd p.text { font-size:14px; }
}

@media (max-width: 1024px) {
	.mainBg ul li .text em.point1 { font-size:1.4em; line-height: 2em; }
	.mainBg ul li .text em.point2 { font-size:2em; line-height: 2em; }

	.content1 dt { font-size:2em; }
	.content1 dd { font-size:0.95em; }
	.content1 dd.num { background:url(../images/icon1.png) center 0px no-repeat; padding-top:110px; font-size:2.5em; background-size:90px; }
	
	.content1 .inblock { display:inline-block; }

	.content4 dt { font-size:1.3em; color:#0162a0; margin-bottom:15px; }
	.content4 dd { font-size:0.95em; line-height: 1.5em; }
	.content4 .inblock { display:inline; }

	.slider { width: 80%;  margin: 0 auto; }
	.slick-prev { left: -13.5%; }
	[dir='rtl'] .slick-prev { right: -13.5%; left: auto;  }
	.slick-next { right: -13.5%; }
	[dir='rtl'] .slick-next { right: auto; left: -13.5%; }	
}

@media (max-width: 800px) {
	.mainBg { /*margin-top:128px;*/ }
	.mainBg ul li .text {  margin-top:10%; font-size:1.3em; } 
	.mainBg ul li .text em.point1 { font-size:1.4em; line-height: 2em; }
	.mainBg ul li .text em.point2 { font-size:1.8em; line-height: 2em; }

	.content1 { width:95%; }
	.content1 dl { height:285px; padding:0 2%;}
	.content1 dt { font-size:1.6em; }
	.content1 dd { font-size:0.85em; }
	.content1 dd.num { background:url(../images/icon1.png) center 0 no-repeat; background-size:80px; padding-top:110px; font-size:1.95em; }
	.content1 dd.imgpd img { width:95%; left:5%; }
	.content1 .inblock { display:inline; }
	.content1 textarea { height:80px;}

	.content2 div { width:95%; }
	.content2 dl { padding:250px 1% 0; width:33.3%; }
	.content2 dl:nth-child(1), .content2 dl:nth-child(2), .content2 dl:nth-child(3) { background-size:200px; }
	.content2 dd { font-size:0.85em; }
	.content2 dd.txtBox { min-height:75px; }
	.content2 dd.btnBox { font-size:1em; }
	.content2 dd.btnBox a { padding:10px 30px; }
	.content2 .inblock { display:inline; }

	.content3 dl { width:95%; padding-left:5%; }
	.content3 dt { font-size:2em; }

	.content4 { width:95%; padding:72px 0; }
	.content4 dl { min-height:100px; padding-left:11%; }
	.content4 dl.one, .content4 dl.two, .content4 dl.three { background-size:25%; background-position:0 15px; }
	.content4 dt { font-size:1.2em; margin-bottom:10px; }
	.content4 dd { font-size:0.9em; }
	.content4 dl.one, .content4 dl.two, .content4 dl.three { background-position:5px 20px; }

	.content5 { background:url(../images/bg4.png) center center no-repeat; padding:72px 0; }
	.content5 h4 { font-size:1.5em; color:#fff; }
	.content5 .btnBox { display:inline-block; width:20%; padding:10px 0px; }
	.content5 .inblock { display:block; }
}

@media (max-width: 670px) {
	.content1 dd.imgpd .kakao_pc { display:none; }
	.content1 dd.imgpd .kakao_m { display:block; }

	.content4 dt { font-size:1em; }
}

@media (max-width: 640px) {
	.mainBg { height:437px; }
	.mainBg ul li { height:437px; }
	.mainBg ul li .text { font-size:1.2em; } 
	.mainBg ul li .text em.point1 { font-size:1.3em; line-height: 2em; }
	.mainBg ul li .text em.point2 { font-size:1.5em; line-height: 2em; }
	.mainBg ul li .imgBox { bottom:10%; }
	.mainBg ul li .imgBox img { width:250px; }

	.content1 { width:95%; }	
	.content1 dl { height:260px; padding:0 3%; }
	.content1 dd { margin-top:15px; }
	.content1 dd.num { background-size:70px;  padding-top:95px;  font-size:1.9em; }
	.content1 dd.imgpd img { width:90%; }
	.content1 dd.btnBox a { padding:5px 0; }

	.content2 dl:nth-child(1), .content2 dl:nth-child(2), .content2 dl:nth-child(3) { background-size:180px; }
	.content2 dd.txtBox { min-height:75px; }
	.content2 dd.btnBox { margin-top:20px; }	

	.content3 dl { width:95%; padding-left:5%; }
	.content3 dt { font-size:2em; }
	.content3 dd { font-size:1.5em; }

	.content4 { width:95%; padding:72px 0; }
	.content4 dt { font-size:0.95em; margin-bottom:10px; }
	.content4 dd { font-size:0.8em; }
	.content4 dl.one, .content4 dl.two, .content4 dl.three { background-position:8px 25px;  }

	.content5 h4 { font-size:1.3em; }
	.content5 .btnBox { width:22%; }
	.content5 .inblock { display:block; }
}

@media (max-width: 480px) {	
	.mainBg .inblock { display:inline-block; }
	.mainBg ul li strong { font-size:1em; }
	.mainBg ul li .text { margin-top:10%; font-size:17px; line-height:1.5em; }
	.mainBg ul li .text em { font-style: normal; display:block; padding-bottom:10px; } 
	.mainBg ul li .text em.point1 { font-size:26px; line-height: 1.5em; }
	.mainBg ul li .text em.point2 { font-size:24px; line-height: 1.5em; }

	.content1 { overflow:hidden; width:100%; margin:0 auto; padding:20px 0 0; }
	.content1 dl { float:none; width:90%; margin:0 auto; height:auto; padding:10% 0; border-right:none; border-bottom:solid 1px #cdcdcd; position:relative;}
	.content1 dl:last-child { border-bottom:none; padding-bottom:0; }
	.content1 dt { font-size:26px; }
	.content1 dd { font-size:16px; margin-top:20px; }
	.content1 dd.num { background:url(../images/icon1.png) 15px center no-repeat; padding-top:0; padding-left:0px; color:#33b5e5; font-weight: 900; background-size:40px; font-size:2.2em; line-height:1.2em; }
	.content1 dd.imgpd { margin-top:35px; }
	.content1 dd.imgpd img { position:relative; left:0; width:100%; }
	.content1 dd.btnBox { display:block; }
	.content1 .inblock { display:inline; }

	.content2 { background:#e5ebf0;  padding:35px 0 0; }
	.content2 div { overflow:hidden;  width:100%; padding:0; }
	.content2 dl { float:none; width:100%; text-align:center; padding:350px 0 30px; margin-top:30px; }
	.content2 dl:nth-child(1) { background:url(../images/KMC-Z600.png) center top no-repeat; margin-top:0; }
	.content2 dl:nth-child(2) { background:url(../images/KTC-5700.png) center top no-repeat; }
	.content2 dl:nth-child(3) { background:url(../images/P2C100.png) center top no-repeat; }
	.content2 dt { color:#0162a0; font-size:20px; }
	.content2 dt span { font-weight:900; font-size:16px; color:#333; padding:10px 0;}
	.content2 dd.txtBox { font-size:16px; min-height:50px; }
	.content2 dd.btnBox a { font-size:16px; }
	.content2 .inblock { display:block; }

	.content3 { background:url(../images/branch_bg_m.png) 60% top no-repeat; background-size:100%; padding:360px 0px 100px; }
	.content3 dl {  width:95%; padding-left:0; margin:0 auto; color:#fff; text-align:center;}
	.content3 dt { font-size:20px; font-weight: 700;  line-height:1.8em; }
	.content3 dd { font-size:16px;  line-height:1.5em;  }
	.content3 dd.btnBox2 a { padding:0 30px; font-size:16px; }

	.content4 { overflow:hidden; width:100%; margin:0 auto; padding:50px 0; }
	.content4 h4 { text-align:center; font-size:24px; font-weight: 700; }
	.content4 dl { float:none; width:100%; margin-top:30px; padding-left:0; padding-top:120px;text-align:center;}
	.content4 dt { font-size:20px; color:#0162a0; margin-bottom:15px; }
	.content4 dd { font-size:16px; line-height: 1.8em; }
	.content4 dl.one { background:url(../images/no1.png) center 25px no-repeat; background-size:97px; margin-left:0; }
	.content4 dl.two { background:url(../images/no2.png) center 25px no-repeat; background-size:97px; }
	.content4 dl.three { background:url(../images/no3.png) center 25px no-repeat; background-size:97px; }
	.content4 .inblock { display:block; }

	.content5 h4 { text-align:center; font-size:20px; color:#fff; }
	.content5 p { text-align:center; }
	.content5 .btnBox { display:inline-block; width:50%; padding:10px 0px; font-size:16px; }
	.content5 .example { padding:30px 0; } 
	.content5 .example .exBox { max-height:400px; }

	.slick-prev { left: -15%; }
	[dir='rtl'] .slick-prev { right: -15%; left: auto;  }
	.slick-next { right: -15%; }
	[dir='rtl'] .slick-next { right: auto; left: -15%; }		
}

@media (max-width: 320px) {	
	.content3 { padding:280px 0px 80px; }

	.slick-prev { left: -17%; }
	[dir='rtl'] .slick-prev { right: -17%; left: auto;  }
	.slick-next { right: -17%; }
	[dir='rtl'] .slick-next { right: auto; left: -17%; }	
}