@charset "utf-8";
/*
===============================================================================================
1.	버    전 : style.css
2.	작 성 자 : supertenziro
3.	작 성 일 : 2014.07.10
4.	참    고 : 공통사용
===============================================================================================
*/

@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');

* {margin:0; padding:0; -webkit-text-size-adjust:none;}
html {overflow-y:auto;}
html, body {-webkit-text-size-adjust:none;} /* iOS에서 임의적인 텍스트 크기 조절 막기 */
body {overflow-x:hidden; font:12px "나눔고딕",'Nanum Gothic', Dotum, Verdana, AppleGothic, Sans-serif; color:#454e5e; line-height:120%; font-weight:normal; background:#262626;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object, textarea, a, img {padding: 0; margin: 0;}
table {border-collapse:collapse; border-spacing:0;}
form, fieldset, abbr, acronym {border:0;}
img {border:0; vertical-align:top;} /* 이미지에 공간을 없애기 위해 vertical-align:top 사용 */
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, th, var {font-weight:normal; font-style:normal;}
ol, ul, li {list-style: none;}

/* 화면숨김 */
#accessibility, hr, caption, legend {position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; text-indent:-5000px;}
/* link */
a, ins {text-decoration: none; color:#454e5e;}
a:link, a:visited {color:#454e5e; text-decoration:none;}
a:hover, a:active {color:#000; text-decoration:underline;}

.clearfix:before, .clearfix:after { content:""; display:block; height:0; overflow:hidden; }
.clearfix:after { clear:both; }
.clearfix {zoom:1;}

/* 기본설정 */
input, select, textarea {vertical-align:middle; border:none; background:none;}
input {border-radius:0;}

/* link */
a:link {text-decoration:none;}
a:hover {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}

/* 레이아웃 */
#wrap {width:100%; padding-top:6px; overflow-x:hidden; background:#fff;}

#header {position:relative; z-index:2;}
	#header h1 {position:absolute; top:0; left:0; margin-top:25px;}
	#header .snsMenu {position:absolute; right:0; top:0; margin-top:18px;}
	#header .snsMenu {zoom:1;}
	#header .snsMenu:after {content:""; display:block; clear:both;}
	#header .snsMenu li {float:left; padding-left:14px;}
	#header .ico_card {position:absolute; top:0; left:50%; margin-left:-45px;}

#container {width:100%; position:relative;}
	.bgWeb_1 {background:url('../images/bg_page1.png') 0 0 #00abee repeat;}
	.bgWeb_2 {background:#2e4662;}
	.bgWeb_3 {background:#17a8e9;}
	.bgWeb_4 {background:#1876b7;}
	.bgWeb_5 {background:#2d4060;}


.contentsFixed {position:relative;}
.contentsFixed > li {float:left; position:relative;}

#footer {width:100%; height:32px; padding-top:13px; background:#262626;}
	#footer .footerCopy {float:left; padding-right:9px; color:#a4a4a4; font-size:12px; font-family:Verdana;}
	#footer .footerMenu {float:left; zoom:1;}
	#footer .footerMenu:after {content:""; display:block; clear:both;}
	#footer .footerMenu li {float:left; padding-left:36px;}
	#footer .footerMenu, #footer  .footerMenu a {color:#a4a4a4; font-size:14px;}
	#footer .language {float:right; width:142px; height:22px; background:url('../images/bg_arrow_top.png') 0 0 no-repeat; margin-top:-2px; position:relative;}
	#footer .language.on {background:url('../images/bg_arrow_bottom.png') 0 0 no-repeat;}
	#footer .language .active {display:block; line-height:22px; color:#dadada; padding-left:16px;}
	#footer .language .active img {vertical-align:middle; margin-right:7px;}
	#footer .language .select {position:absolute; left:0; bottom:22px; width:142px; background:#1c1c1c; padding:5px 0; display:none;}
	#footer .language .select li {height:22px; width:142px; float:none;}
	#footer .language .select li a {display:block; padding-left:16px; line-height:22px; color:#dadada;}
	#footer .language .select li a img {vertical-align:middle; margin-right:7px;}

/* 공통 */
.w1024 {min-width:1024px; max-width:1280px; margin:0 auto;}
*+.w1024 {width:1080px}

.col_fff {color:#fff !important;}

/* 컨텐츠 */

.content {text-align:center; position:relative; z-index:1;}
	.content.conRolling {height:507px; padding-top:141px;}
	.contentsFixed {z-index:1;}

	.bgWeb_1 .content h2 {margin-bottom:12px; font-size:58px; line-height:110%; color:#454e5e; font-weight:550; letter-spacing:-2px; word-spacing:-3px; }
	.bgWeb_1 .content p {color:#454e5e; font-size:18px; line-height:120%; letter-spacing:-1px; }
	.bgWeb_1 .content p strong {font-weight:bold; }
	.bgWeb_1 .content p.col_fff {margin-bottom:10px;}
	.bgWeb_1 .content .bigImg {position:relative; z-index:1; margin-top:34px;}
	@media screen and (-webkit-min-device-pixel-ratio:0) { .bgWeb_1 .content .bigImg {margin-top:36px;} }
	.bgWeb_1 .content .bigImg img {width:614px;}

	.bgWeb_2 .content h2 {padding-top:0; margin-top:-14px; margin-bottom:10px; font-size:0; line-height:0;}
	.bgWeb_2 .content h2 img {width:185px;}
	.bgWeb_2 .content p.col_fff {font-size:39px; line-height:110%; letter-spacing:-1px; }
	.bgWeb_2 .content .bigImg {position:relative; z-index:1; margin-top:35px;}
	.bgWeb_2 .content .bigImg img {width:636px;}

	.htelRolling {position:relative; text-align:left; font-size:20px; color:#eaeaea;  line-height:130%; }
	.bgWeb_3 .radiusBox {display:inline-block; zoom:1; *display:inline; height:34px; line-height:34px; padding:0 10px; margin:0 0 25px 0; color:#fff; font-size:24px; font-weight:600; background:#0094cb; -moz-border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px; border-radius:15px;}
	.bgWeb_3 h2 {margin-top:0; margin-bottom:30px; font-size:50px; color:#fff; font-weight:600; line-height:110%; }

	.bgWeb_3 .textRolling {position:relative; z-index:6; overflow:hidden; zoom:1; height:315px; padding-top:12px;}
	.bgWeb_3 .textRolling li {display:none;}
	.bgWeb_3 .textRolling li.on {display:block}
	.bgWeb_3 .textRolling li .mobile_text {display:none;}
	.bgWeb_3 .listRolling {overflow:hidden; margin-top:0; position:relative; z-index:20; width:780px; padding-left:10px;}
	.bgWeb_3 .listRolling li {float:left; width:84px; height:127px; margin-right:13px;}
	.bgWeb_3 .listRolling li:last-child {margin-right:0}
	.bgWeb_3 .listRolling li a {display:block; padding-top:16px; color:#a4ddf6; font-weight:normal; font-size:14px; text-align:center; line-height:115%; background:url("../images/listRolling_off.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li a:hover, .bgWeb_3 .listRolling li a.on {display:block; color:#f3f8fb; background:url("../images/listRolling_on.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li a strong {display:block; padding-top:24px; line-height:130%; }
	.bgWeb_3 .listRolling li .listRolling_1 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_1.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_2 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_2.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_3 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_3.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_4 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_4.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_5 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_5.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_6 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_6.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_7 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_7.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_8 {display:block; height:50px; overflow:hidden; background:url("../images/listRolling_8.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li a:hover span, .bgWeb_3 .listRolling li a.on span {background-position: 50% -50px}

	.bgWeb_3 .imgRolling {position:absolute; z-index:5; top:0; right:15px; margin-top:-25px; width:341px; height:583px; padding:72px 0 0 39px; overflow:hidden;}
	.bgWeb_3 .imgRolling .imghtel {position:absolute; top:0; left:0; display:block; width:380px; height:655px; background:url("../images/htel_1280.png") 0 0 no-repeat;}
	.bgWeb_3 .imgRolling .rollingWrap {width:237px; height:412px; position:absolute; left:39px; top:72px; overflow:hidden;}
	.bgWeb_3 .imgRolling ul {width:1896px; height:412px; position:relative;}
	.bgWeb_3 .imgRolling ul li {float:left; width:237px; height:412px; position:relative;}
	.bgWeb_3 .imgRolling > span {display:none;}
	.bgWeb_3 .imgRolling ul li.nth1 img {display:block;}
	.bgWeb_3 .imgRolling span.img1 {position:absolute; top:70px; left:38px;}
	.bgWeb_3 .imgRolling span.img2 {position:absolute; top:70px; left:38px;}
	.bgWeb_3 .imgRolling span.img3 {position:absolute; top:70px; left:27px;}
	.bgWeb_3 .imgRolling span.img4 {position:absolute; top:70px; left:27px;}

	.bgWeb_3 .btnRolling {position:absolute; right:5px; top:179px; z-index:30; }
	.bgWeb_3 .btnRolling li {width:11px; height:10px; margin-bottom:15px; *margin-bottom:0;}
	.bgWeb_3 .btnRolling li a {display:block; width:11px; height:10px; text-indent:-9999px; background:url("../images/btnRolling_off.png") 0 0 no-repeat}
	.bgWeb_3 .btnRolling li.on a, .bgWeb_3 .btnRolling li:hover a {background:url("../images/btnRolling_on.png") 0 0 no-repeat}

	.bgWeb_4 .radiusBox {display:inline-block; zoom:1; *display:inline; height:34px; line-height:34px; padding:0 10px; margin:0 0 25px 0; color:#fff; font-size:24px; font-weight:600; background:#0261a3; -moz-border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px; border-radius:15px;}
	.bgWeb_4 h2 {margin-bottom:25px; font-size:50px; color:#fff; font-weight:600; line-height:110%; }

	.bgWeb_4 .textRolling {overflow:hidden; height:365px;}
	.bgWeb_4 .textRolling li {display:none;}
	.bgWeb_4 .textRolling li.on {display:block}
	.bgWeb_4 .textRolling li li {display:block; float:none; padding-top:10px; color:#c0d3e0; text-align:left; font-size:18px; line-height:130%;}
	.bgWeb_4 .textRolling li li:first-child {padding-top:0;}
	.bgWeb_4 .textRolling li .web_text {display:block;}
	.bgWeb_4 .textRolling li .mobile_text {display:none;}
	.bgWeb_4 .listRolling {overflow:hidden; zoom:1; margin-top:0; position:relative; z-index:20; width:300px;}
	.bgWeb_4 .listRolling li {float:left; width:84px; height:127px; margin-right:13px;}
	.bgWeb_4 .listRolling li:last-child {margin-right:0}
	.bgWeb_4 .listRolling li a {display:block; padding-top:16px; color:#a4ddf6; font-weight:normal; font-size:14px; text-align:center; line-height:115%; background:url("../images/listRolling2_off.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li a:hover, .bgWeb_4 .listRolling li a.on {display:block; color:#f3f8fb; background:url("../images/listRolling2_on.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li a strong {display:block; padding-top:24px; line-height:130%; }
	.bgWeb_4 .listRolling li .listRolling_1 {display:block; height:51px; overflow:hidden; background:url("../images/listRolling2_1.png") 50% 0 no-repeat;}
	.bgWeb_4 .listRolling li .listRolling_2 {display:block; height:51px; overflow:hidden; background:url("../images/listRolling2_2.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li .listRolling_3 {display:block; height:51px; overflow:hidden; background:url("../images/listRolling2_3.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li a:hover span, .bgWeb_4 .listRolling li a.on span {background-position: 50% -52px}

	.bgWeb_4 .imgRolling {position:absolute; z-index:-1; top:10px; right:0; width:655px; height:577px; overflow:hidden; }
	.bgWeb_4 .imgRolling ul {width:3000px;}
	.bgWeb_4 .imgRolling ul li {float:left; display:none;}
	.bgWeb_4 .imgRolling ul li.on {display:block;}

	.bgWeb_4 .btnRolling {position:absolute; right:0; top:110px; z-index:30; }
	.bgWeb_4 .btnRolling li {width:11px; height:10px; margin-bottom:15px; *margin-bottom:0;}
	.bgWeb_4 .btnRolling li a {display:block; width:11px; height:10px; text-indent:-9999px; background:url("../images/btnRolling_off.png") 0 0 no-repeat}
	.bgWeb_4 .btnRolling li.on a, .bgWeb_4 .btnRolling li:hover a {background:url("../images/btnRolling_on.png") 0 0 no-repeat}

	.bgWeb_5 .content {padding-top:148px; }
	.bgWeb_5 .content h2 {margin-bottom:41px; font-size:40px; line-height:110%; color:#fff; font-weight:600;}
	.bgWeb_5 .contentList {height:143px !important; padding-top:40px !important; }

.contentList {position:relative; top:0; width:100%; height:184px; padding-top:45px; text-align:center; background:#fff;}
	.contentList ul {display:inline-block; zoom:1; *display:inline;}
	.contentList ul:after {content:""; display:block; clear:both;}
	.contentList ul li {float:left; padding:0 27px; position:relative; z-index:21;}
	.contentList ul li a {display:block;}
	.contentList ul li strong {display:block; padding-top:13px; color:#454e5e; font-size:16px; font-weight:600;  letter-spacing:-1px; }

.conRollingBtn {position:absolute; bottom:0; left:0; width:100%; margin-bottom:30px; text-align:center;}
	.conRollingBtn ul {display:inline-block; zoom:1; *display:inline;}
	.conRollingBtn ul:after {content:""; display:block; clear:both;}
	.conRollingBtn ul li {float:left; padding:0 9px; background:url("../images/bg_line_1.png") 0 0 repeat-x}
	.conRollingBtn ul li:first-child {padding-left:0;}
	.conRollingBtn ul li.last-child {padding-right:0;}
	.conRollingBtn ul li a {display:block; width:26px; height:25px; line-height:25px; color:#8f8f8f; font-family:Century Gothic; font-weight:bold; font-size:11px; background:url("../images/bg_conRollingBtn.png") 0 0 no-repeat;}
	.conRollingBtn ul li a.on, .conRollingBtn ul li a:hover {color:#fff; background:url("../images/bg_conRollingBtn_on.png") 0 0 no-repeat}

	.inputBox {width:560px; margin:0 auto; padding-bottom:25px; text-align:left;}
	.inputBox ul {padding-bottom:10px;}
	.inputBox label {display:block; padding-bottom:10px; color:#d7d7d7; font-size:14px; font-weight:600;}
	.inputBox input {width:98%; height:36px; margin-bottom:14px; padding:0 1%; line-height:36px; border:1px solid #d8d9da; background:#fff; -moz-border-radius:2px;-webkit-border-radius:2px;-o-border-radius:2px; border-radius:2px;}
	.inputBox textarea {width:98%; height:100px; padding:5px 1%; margin-bottom:15px; line-height:130%; border:1px solid #d8d9da; background:#fff; -moz-border-radius:2px;-webkit-border-radius:2px;-o-border-radius:2px; border-radius:2px;}

	.address {padding-bottom:29px;}
	.address li {padding-bottom:13px; font-size:14px; line-height:135%; color:#8e8e8e;}
	.address li:first-child {padding-bottom:17px; color:#d7d7d7; font-size:18px; line-height:110%; font-weight:600;}
	.address li strong {color:#286ab4; font-weight:bold; padding:0 7px 0 10px;}
	.address li strong:first-child {padding-left:0;}
	.address li.tel {color:#d7d7d7; font-weight:550;}
	.address li.tel a {color:#d7d7d7; }
	.address li.tel.mobile_text {display:none;}

.btnSt {display:block; width:100%; height:46px; line-height:46px; margin-bottom:15px; text-align:center; color:#e8e8e8; font-weight:bold; font-size:20px; background:#286ab4; -moz-border-radius:2px;-webkit-border-radius:2px;-o-border-radius:2px; border-radius:2px;}
a.btnSt {color:#e8e8e8; }

.mapSt {width:100%; height:520px;}

.popWrap {position:absolute; left:0; top:0; width:100%; height:100%; z-index:50; display:none;}
	.popContainer {position:absolute; left:50%; top:105px; margin:0 0 0 -400px; width:800px; height:550px; background:#fff; overflow:hidden;}
	.popContainer .btn_popup_close {position:absolute; right:25px; top:20px;}
	.popContainer h2 {height:70px; line-height:70px; padding-left:50px; font-size:24px; color:#fff; font-weight:600; background:#00aeef;}
	.popContainer .popCon {padding:25px 50px; font-size:13px; color:#282828; line-height:160%; width:700px; height:430px; overflow-y:auto; overflow-x:hidden; }
	.popContainer .popCon > ol > li {padding-bottom:40px;}
	.popContainer .popCon > ol > li > strong {display:block; padding-bottom:25px; font-weight:bold;}
	.popContainer .popCon > ol > li ul li {padding-left:18px;}
	.popContainer .popCon .pt {padding-top:18px;}
	.popBg {position:fixed; left:0; top:0; width:100%; height:100%; background:url("../images/bg_pop.png") 0 0 repeat}


#page3 .scroll, #page4 .scroll  {height:789px; overflow:hidden; position:absolute; left:0; top:-145px; width:100%; z-index:20; background:url("../images/bg_scroll.png") 0 0 repeat}
*+html #page3 .scroll, #page4 .scroll {height:700px;}
#page3 .scroll ul, #page4 .scroll ul {height:789px; }
#page3 .scroll ul li, #page4 .scroll ul li  {height:789px; width:200%; margin-left:-50%; display:none;}
#page3 .scroll ul li.roll1, #page4 .scroll ul li.roll1 {display:block;}


/* 1024 */

@media only screen
and (max-width : 1270px) {

.w1024 {min-width:769px; max-width:1000px; margin:0 auto;}
*+.w1024 {width:1000px}

	#header h1 img {width:125px;}
	#header .snsMenu li img {width:25px;}
	#header .ico_card {margin-left:-39px;}
	#header .ico_card img {width:78px;}

	#footer .footerMenu, #footer  .footerMenu a {color:#a4a4a4; font-size:12px;}

	.content.conRolling {height:415px; padding-top:132px;}

	.bgWeb_1 .content h2 {margin-bottom:12px; font-size:46px;}
	.bgWeb_1 .content p {font-size:15px;}
	.bgWeb_1 .content p.col_fff {margin-bottom:10px;}
	.bgWeb_1 .content .bigImg {position:relative; z-index:1; margin-top:26px;}

	.bgWeb_1 .content .bigImg img {width:500px;}

	.bgWeb_2 h2 img {width:148px;}
	.bgWeb_2 .content p.col_fff {font-size:30px;}
	.bgWeb_2 .content .bigImg {margin-top:30px}
	.bgWeb_2 .content .bigImg img {width:509px;}


	.htelRolling {font-size:16px;}
	.bgWeb_3 .radiusBox {font-size:19px;}
	.bgWeb_3 h2 {font-size:40px}
	.bgWeb_3 .textRolling {height:260px;}
	.bgWeb_3 .listRolling li {float:left; width:67px; height:110px; margin-right:13px;}
	.bgWeb_3 .listRolling li a {font-size:11px; background:url("../images/listRolling_off_1024.png") 50% 0 no-repeat}

	.bgWeb_3 .listRolling {width:640px; padding-left:10px;}
	.bgWeb_3 .listRolling li a {padding-top:12px;}
	.bgWeb_3 .listRolling li a:hover, .bgWeb_3 .listRolling li a.on {background:url("../images/listRolling_on_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li a strong {display:block; padding-top:20px; line-height:130%; }
	.bgWeb_3 .listRolling li .listRolling_1 {height:40px; background:url("../images/listRolling_1_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_2 {height:40px; background:url("../images/listRolling_2_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_3 {height:40px; background:url("../images/listRolling_3_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_4 {height:40px; background:url("../images/listRolling_4_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_5 {height:40px; background:url("../images/listRolling_5_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_6 {height:40px; background:url("../images/listRolling_6_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_7 {height:40px; background:url("../images/listRolling_7_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li .listRolling_8 {height:40px; background:url("../images/listRolling_8_1024.png") 50% 0 no-repeat}
	.bgWeb_3 .listRolling li a:hover span, .bgWeb_3 .listRolling li a.on span {background-position: 50% -40px}

	.bgWeb_3 .imgRolling {top:0; right:15px; margin-top:-25px; width:300px; height:583px; padding:72px 0 0 0;}
	.bgWeb_3 .imgRolling .imghtel {top:0; left:0; width:315px; height:525px; background:url("../images/htel_1024.png") 0 0 no-repeat;}
	.bgWeb_3 .imgRolling .rollingWrap {width:190px; left:30px; top:57px; }
	.bgWeb_3 .imgRolling .rollingWrap img {width:190px;}
	.bgWeb_3 .imgRolling ul {width:1896px; height:412px;}
	.bgWeb_3 .imgRolling ul li {width:190px; height:326px;}
	.bgWeb_3 .imgRolling span img {width:235px;}
	.bgWeb_3 .imgRolling span.img1 {top:57px; left:48px;}
	.bgWeb_3 .imgRolling span.img2 {top:57px; left:30px;}
	.bgWeb_3 .imgRolling span.img3 {top:56px; left:20px;}
	.bgWeb_3 .imgRolling span.img3 img {width:210px;}
	.bgWeb_3 .imgRolling span.img4 {top:53px; left:20px;}
	.bgWeb_3 .imgRolling span.img4 img {width:224px;}

	.bgWeb_3 .btnRolling {top:30px;}


	.bgWeb_4 h2 {font-size:40px;}
	.bgWeb_4 .radiusBox {font-size:19px;}

	.bgWeb_4 .textRolling {height:295px; margin-top:-10px}
	.bgWeb_4 .textRolling li li {padding-top:10px;font-size:13px;}

	.bgWeb_4 .imgRolling {position:absolute; z-index:-1; top:10px; right:0; width:515px; height:430px;}
	.bgWeb_4 .imgRolling ul {width:3000px;}
	.bgWeb_4 .imgRolling ul li {float:left; display:none;}
	.bgWeb_4 .imgRolling ul li.on {display:block;}
	.bgWeb_4 .imgRolling ul li img {width:500px}

	.bgWeb_4 .listRolling {width:300px;}
	.bgWeb_4 .listRolling li {width:70px; height:115px; }
	.bgWeb_4 .listRolling li a {padding-top:12px; background:url("../images/listRolling2_off_1024.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li a:hover, .bgWeb_4 .listRolling li a.on {background:url("../images/listRolling2_on_1024.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li a strong {padding-top:25px; font-size:11px;}
	.bgWeb_4 .listRolling li .listRolling_1 {height:41px; background:url("../images/listRolling2_1_1024.png") 50% 0 no-repeat;}
	.bgWeb_4 .listRolling li .listRolling_2 {height:41px; background:url("../images/listRolling2_2_1024.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li .listRolling_3 {height:41px; background:url("../images/listRolling2_3_1024.png") 50% 0 no-repeat}
	.bgWeb_4 .listRolling li a:hover span, .bgWeb_4 .listRolling li a.on span {background-position: 50% -41px}

	.bgWeb_5 .content {padding-top:115px; }
	.bgWeb_5 .content h2 {margin-bottom:30px; font-size:32px;}
	.bgWeb_5 .contentList {height:110px !important; padding-top:25px !important;}

	.contentList {height:155px; padding-top:23px;}
	.contentList ul li {padding:0 20px}
	.contentList ul li strong {font-size:13px;}
	.contentList ul li img {width:53px;}

	.conRollingBtn {margin-bottom:25px;}
	.conRollingBtn ul li {padding:0 5px; background:url("../images/bg_line_1_1024.png") 0 50% repeat-x}
	.conRollingBtn ul li a {width:21px; height:20px; line-height:20px; background:url("../images/bg_conRollingBtn_1024.png") 0 0 no-repeat}
	.conRollingBtn ul li a.on, .conRollingBtn ul li a:hover {background:url("../images/bg_conRollingBtn_on_1024.png") 0 0 no-repeat}
	.conRollingBtn ul li.last-child a {position:relative; right:-1px;}

	.inputBox {width:450px; padding-bottom:30px;}
	.inputBox ul {padding-bottom:10px;}
	.inputBox label {font-size:11px; padding-bottom:5px;}
	.inputBox input {height:30px; margin-bottom:10px; line-height:30px;}
	.inputBox textarea {height:78px; padding:5px 1%; margin-bottom:10px;}

	.address {padding-bottom:13px;}
	.address li {padding-bottom:13px; font-size:11px; line-height:125%; }
	.address li:first-child {padding-bottom:13px; font-size:14px;}

	.btnSt {height:38px; line-height:38px; margin-bottom:10px; font-size:16px;}

	.popContainer {top:70px; margin:0 0 0 -385px; width:780px; height:500px;}
	.popContainer .btn_popup_close {top:15px;}
	.popContainer .btn_popup_close img {width:20px;}
	.popContainer h2 {height:50px; line-height:50px; padding-left:40px; font-size:20px;}
	.popContainer .popCon {padding:25px 40px; font-size:13px; color:#282828; line-height:160%; width:700px; height:400px; overflow-y:auto; overflow-x:hidden; }
	.popContainer .popCon > ol > li {padding-bottom:30px;}
	.popContainer .popCon > ol > li > strong {padding-bottom:20px;}
	.popContainer .popCon > ol > li ul li {padding-left:15px;}
	.popContainer .popCon .pt {padding-top:15px;}

	#page3 .scroll, #page4 .scroll  {height:600px;  top:-145px;}
	*+html #page3 .scroll, #page4 .scroll {height:600px;}
	#page3 .scroll ul, #page4 .scroll ul {height:600px;}
	#page3 .scroll ul li, #page4 .scroll ul li  {height:600px;}
}

@media only screen
and (max-width : 768px) {
	.w1024 {min-width:320px; max-width:768px; margin:0 auto;}
	*+.w1024 {width:768px;}

	#wrap {overflow:hidden;}

	#header h1 {left:10px; margin-top:10px;}
	#header h1 img {width:72px;}
	#header .snsMenu {margin-top:10px; right:10px;}
	#header .snsMenu li img {width:14px;}
	#header .snsMenu li {padding-left:5px;}
	#header .ico_card {margin-left:-25px;}
	#header .ico_card img {width:50px;}

#footer {width:100%; height:36px;background:#262626; position:relative;}
	#footer .footerCopy {position:absolute; left:10px; bottom:10px; padding-right:9px; color:#a4a4a4; font-size:8px; font-family:Verdana;}
	#footer .footerMenu {position:absolute; left:10px;}
	#footer .footerMenu li {float:left; padding-left:0; height:9px; line-height:9px;}
	#footer .footerMenu li:first-child {padding-right:5px; margin-right:5px; border-right:1px solid #666;}
	#footer .footerMenu, #footer  .footerMenu a {color:#a4a4a4; font-size:8px;}
	#footer .language {float:none; position:absolute; right:0; margin-right:5px; width:114px; height:19px; background:url('../images/bg_arrow_top.png') 0 0 no-repeat; margin-top:0; font-size:8px;
	background-size:100% 100%;}
	#footer .language.on {background:url('../images/bg_arrow_bottom.png') 0 0 no-repeat; background-size:100% 100%;}
	#footer .language .active {display:block; line-height:19px; color:#dadada; padding-left:16px;}
	#footer .language .active img {vertical-align:middle; margin-right:7px; width:15px;}
	#footer .language .select {position:absolute; left:0; bottom:19px; width:114px; background:#1c1c1c; padding:5px 0; display:none;}
	#footer .language .select li {height:19px; width:114px; float:none; padding:0;}
	#footer .language .select li a {display:block; padding-left:16px; line-height:19px; color:#dadada;}
	#footer .language .select li a img {vertical-align:middle; margin-right:7px; width:15px;}

	#page3 .scroll, #page4 .scroll {display:none;}

	.contentList {height:108px; padding-top:20px; position:relative;}
	.contentList ul {position:absolute; top:20px; width:228px; left:50%; margin-left:-114px;}
	.contentList ul li {padding:0; width:76px;}
	.contentList ul li strong {font-size:10px; padding-top:8px;}
	.contentList ul li img {width:40px;}
	.conRollingBtn {margin-bottom:10px;}
	.conRollingBtn ul li a, .conRollingBtn ul li a:hover {display:block; width:21px; height:20px; line-height:20px; color:#8f8f8f; font-family:Century Gothic; font-weight:bold; font-size:11px; background:url("../images/bg_conRollingBtn_640.png") 0 0 no-repeat; background-size:100% 100%;}
	.conRollingBtn ul li a.on {color:#fff; background:url("../images/bg_conRollingBtn_on_640.png") 0 0 no-repeat;  background-size:100% 100%;}

	.bgWeb_1 .content h2 {font-size:24px;}
	.bgWeb_1 .content p {font-size:11px; line-height:140%;}
	.bgWeb_1 .content p em {display:block;}
	.bgWeb_1 .content .bigImg {margin-top:29px;}
	.bgWeb_1 .content .bigImg img {width:246px;}
	.bgWeb_1 .content.conRolling {height:267px; padding-top:70px;}

	.bgWeb_2 h2 img {display:none;}
	.bgWeb_2 .content p.col_fff {font-size:24px;}
	.bgWeb_2 .content p.col_fff em {display:block;}
	.bgWeb_2 .content .bigImg {margin-top:30px;}
	.bgWeb_2 .content .bigImg img {width:270px;}
	.bgWeb_2 .content.conRolling {height:267px; padding-top:70px;}

	.bgWeb_3 .content.conRolling {height:692px; padding-top:70px;}
	.bgWeb_3 .textRolling {text-align:center; margin:0 auto; width:100%; height:auto; padding-top:0;}
	.bgWeb_3 .textRolling li .web_text {display:none;}
	.bgWeb_3 .textRolling li .mobile_text {display:block; font-size:11px; line-height:140%; padding:0; margin-bottom:25px; letter-spacing:-1px;}
	.bgWeb_3 .radiusBox {font-size:11px; line-height:21px; height:21px; margin-bottom:15px;}
	.bgWeb_3 h2 {font-size:24px; margin-bottom:10px; padding:0 10px; letter-spacing:-1px; font-weight:normal;}
	.htelRolling {text-align:center;}
	.bgWeb_3 .listRolling {width:280px; padding:0; margin:0 auto;}
	.bgWeb_3 .listRolling li {width:70px; margin-right:0;}
	.bgWeb_3 .listRolling li span {display:block; margin:0 auto;}
	.bgWeb_3 .listRolling li a {padding-top:0;}
	.bgWeb_3 .listRolling li a strong {font-weight:normal; font-size:10px; padding-top:8px;}
	.bgWeb_3 .listRolling li .listRolling_1 {height:51px; background:url("../images/listRolling_1_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li .listRolling_2 {height:51px; background:url("../images/listRolling_2_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li .listRolling_3 {height:51px; background:url("../images/listRolling_3_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li .listRolling_4 {height:51px; background:url("../images/listRolling_4_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li .listRolling_5 {height:51px; background:url("../images/listRolling_5_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li .listRolling_6 {height:51px; background:url("../images/listRolling_6_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li .listRolling_7 {height:51px; background:url("../images/listRolling_7_640.png") 50% 50% no-repeat; margin:0 auto;}
	.bgWeb_3 .listRolling li .listRolling_8 {height:51px; background:url("../images/listRolling_8_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a {font-size:10px; width:60px; background:url('../images/listRolling_640.png') 50% 0 no-repeat; margin:0 auto; display:block;}
	.bgWeb_3 .listRolling li a.on, 	.bgWeb_3 .listRolling li a:hover {width:60px; background:url('../images/listRolling_on_640.png') 50% 0 no-repeat; }
	.bgWeb_3 .listRolling li a.on .listRolling_1, 	.bgWeb_3 .listRolling li a:hover .listRolling_1 {background:url("../images/listRolling_1_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a.on .listRolling_2, 	.bgWeb_3 .listRolling li a:hover .listRolling_2 {background:url("../images/listRolling_2_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a.on .listRolling_3, 	.bgWeb_3 .listRolling li a:hover .listRolling_3 {background:url("../images/listRolling_3_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a.on .listRolling_4, 	.bgWeb_3 .listRolling li a:hover .listRolling_4 {background:url("../images/listRolling_4_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a.on .listRolling_5, 	.bgWeb_3 .listRolling li a:hover .listRolling_5 {background:url("../images/listRolling_5_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a.on .listRolling_6, 	.bgWeb_3 .listRolling li a:hover .listRolling_6 {background:url("../images/listRolling_6_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a.on .listRolling_7, 	.bgWeb_3 .listRolling li a:hover .listRolling_7 {background:url("../images/listRolling_7_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .listRolling li a.on .listRolling_8, 	.bgWeb_3 .listRolling li a:hover .listRolling_8 {background:url("../images/listRolling_8_on_640.png") 50% 50% no-repeat;}
	.bgWeb_3 .btnRolling {display:none;}
	.bgWeb_3 .imgRolling {position:absolute; right:50%; top:428px; width:182px; margin-right:-103px; height:341px; padding-top:0;}
	.bgWeb_3 .imgRolling .imghtel {width:182px; height:341px; background:url('../images/htel_640.png') 0 0 no-repeat;}
	.bgWeb_3 .imgRolling .rollingWrap {left:20px; top:38px;}
	.bgWeb_3 .imgRolling ul {height:216px;}
	.bgWeb_3 .imgRolling ul li {width:124px; height:216px;}
	.bgWeb_3 .imgRolling .rollingWrap {width:124px;}
	.bgWeb_3 .imgRolling .rollingWrap img {width:124px;}

	.bgWeb_3 .imgRolling span.img1 {top:40px; left:37px;}
	.bgWeb_3 .imgRolling span.img2 {top:32px; left:30px;}
	.bgWeb_3 .imgRolling span.img3 {top:32px; left:13px;}
	.bgWeb_3 .imgRolling span.img4 {top:36px; left:13px;}

	.bgWeb_3 .imgRolling span img {width:145px;}
	.bgWeb_3 .imgRolling span.img3 img {width:138px;}
	.bgWeb_3 .imgRolling span.img4 img {width:148px;}

	.bgWeb_4 .content.conRolling {height:482px; padding-top:70px;}
	.bgWeb_4 .textRolling {text-align:center; margin:0 auto 20px; width:100%; height:auto; padding-top:0;}
	.bgWeb_4 .radiusBox {font-size:11px; line-height:21px; height:21px; margin-bottom:15px;}
	.bgWeb_4 h2 {font-size:24px; margin-bottom:10px; padding:0 10px; letter-spacing:-1px; font-weight:normal;}
	.bgWeb_4 .textRolling li li {font-size:11px; line-height:140%; text-align:center; padding-top:0; letter-spacing:-1px;}
	.bgWeb_4 .textRolling li .web_text {display:none;}
	.bgWeb_4 .textRolling li .mobile_text {display:block;}
	.htelRolling {text-align:center;}
	.bgWeb_4 .imgRolling  {width:251px; right:50%; margin-right:-140px; height:205px; top:300px;}
	.bgWeb_4 .imgRolling ul li img {width:251px;}
	.bgWeb_4 .btnRolling {display:none;}
	.bgWeb_4 .listRolling {width:210px; padding:0; margin:0 auto;}
	.bgWeb_4 .listRolling li {width:70px; margin-right:0;}
	.bgWeb_4 .listRolling li span {display:block; margin:0 auto 0;}
	.bgWeb_4 .listRolling li a {padding-top:0;}
	.bgWeb_4 .listRolling li a strong {font-weight:normal; font-size:10px; padding-top:8px;}
	.bgWeb_4 .listRolling li .listRolling_1 {height:51px; background:url("../images/listRolling2_1_640.png") 50% 50% no-repeat;}
	.bgWeb_4 .listRolling li .listRolling_2 {height:51px; background:url("../images/listRolling2_2_640.png") 50% 50% no-repeat;}
	.bgWeb_4 .listRolling li .listRolling_3 {height:51px; background:url("../images/listRolling2_3_640.png") 50% 50% no-repeat;}
	.bgWeb_4 .listRolling li a {font-size:10px; width:60px; background:url('../images/listRolling_640.png') 50% 0 no-repeat; background-size:50px 50px; margin:0 auto; display:block;}
	.bgWeb_4 .listRolling li a.on, 	.bgWeb_4 .listRolling li a:hover {width:60px; background:url('../images/listRolling_on_640.png') 50% 0 no-repeat;}
	.bgWeb_4 .listRolling li a.on .listRolling_1, 	.bgWeb_4 .listRolling li a:hover .listRolling_1 {background:url("../images/listRolling2_1_on_640.png") 50% 50% no-repeat;}
	.bgWeb_4 .listRolling li a.on .listRolling_2, 	.bgWeb_4 .listRolling li a:hover .listRolling_2 {background:url("../images/listRolling2_2_on_640.png") 50% 50% no-repeat;}
	.bgWeb_4 .listRolling li a.on .listRolling_3, 	.bgWeb_4 .listRolling li a:hover .listRolling_3 {background:url("../images/listRolling2_3_on_640.png") 50% 50% no-repeat;}

	.bgWeb_5 .content {padding-top:70px;}
	.bgWeb_5 .content h2 {font-size:16px; margin-bottom:10px; padding:0 10px; letter-spacing:-1px; font-weight:normal;}

	.bgWeb_5 .inputBox {width:250px; margin:0 auto; padding-bottom:15px;}
	.bgWeb_5 .contentList {height:78px!important; padding-top:20px; position:relative;}
	.mapSt {height:255px;}
	.bgWeb_5 .inputBox textarea {height:20px;}

	.address li:first-child {font-size:11px; padding-bottom:10px;}
	.address li:nth-child(2) {padding:0 20px 10px;}
	.address li {font-size:11px;}
	.address li.tel.web_text {display:none;}
	.address li.tel.mobile_text {display:block;}

	.popContainer {width:80%; margin-left:-40%; height:400px;}
	.popContainer h2 {height:40px; line-height:40px; padding-left:3%; font-size:14px;}
	.popContainer .btn_popup_close {right:3%; top:10px;}
	.popContainer .popCon {padding:3%; font-size:11px; width:94%; color:#282828; line-height:160%; height:320px; overflow-y:auto; overflow-x:hidden; }
}