@charset "utf-8";
/* CSS Document */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, address, em, img, dl, dt, dd, ol, ul, li, fieldset, form, table, caption, tbody, tfoot, thead, tr, th, td, footer, header, nav, section, input, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	outline: 0;
	font: inherit;
	font-family: 'Nanum Gothic','돋음', Dotum, Arial, sans-serif;
	vertical-align: top;
	color: #222;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html,body { height: 100%; min-height: 100%;}
body {
	font-size: 100%;
	line-height: 1;
}
a {text-decoration:none;
}
ol, ul, li {
	list-style: none;
}
input, select, textarea {
	vertical-align: middle;
}

i, em, address {font-style: normal; font-weight: normal;}

* { -webkit-text-size-adjust: none; }
/*여기까지 초기화*/

/*@import url( 'http://fonts.googleapis.com/earlyaccess/nanumgothic.css');나눔고딕웹폰트*/
/*임포트된 나눔고딕 사용방법: 클래스명및 선택자 {font-family: 'Nanum Gothic'; font-weight: 900;}*/

/*내 서버에 폰트를 저장해서 불러내기*/
@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.woff')}
@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.eot')}

.wrap { width: 100%; min-width: 1160px; height:auto !important; height: 100%; /*min-height: 100%;*/}
.side_menu { display: none; }
h2 { font-size: 45px; color: #000; text-align: center; height: 130px; }
h2 span { font-weight: bold; background: url(/images/bg_title.png) repeat-x bottom; padding-bottom: 8px;}

header { position: fixed; width: 100%; padding: 30px 0; background: rgba(255,255,255,0.7); z-index: 1; }
header.on { padding: 10px 0; border-bottom: 1px solid #b6b6b6; box-shadow: 0 1px 5px #b6b6b6;}
header .top { width: 1160px; margin: 0 auto; height: 28px; overflow: auto;}
header h1 { font-size: 25px; font-weight: bold; color: #000; float: left }
header nav { float: right; margin-top: 3px;}
header nav a { display: block; float: left; color: #666; font-size: 17px; margin-left: 50px; font-weight: bold;}
header .top button { display: none }

.home { height: 88px; padding: 306px 0; text-align: center;}

.service { height: 550px; }
.service .b_left { width: 50%; height: 100%; float: left; background: #1a1a1a; }
.service .b_left .txt_box { background: url(/images/bg_g_line.png) repeat-y; height: 100%; margin: 0 auto; }
.service .b_left .txt_box h2 { padding-top: 60px; height: 110px; color: #fff; }
.service .b_left .txt_box h2 span { color: #fff; }
.service .b_left .txt_box ul.s_title li { background: url(/images/ic_skill_g.png) no-repeat; height: 25px; padding: 5px 0 0 45px; margin-bottom: 14px; }
.service .b_left .txt_box ul.s_title li a { color: #454545; font-size: 20px; }
.service .b_left .txt_box ul.s_title li.on { background: url(/images/ic_skill_r.png) no-repeat; }
.service .b_left .txt_box ul.s_title li.on a { color: #fff; }
.service .b_left .txt_box ul.s_sub li { display: none; color: #c9c9c9; font-size: 15px; padding-left: 45px; line-height: 1.7;}
.service .b_left .txt_box ul.s_sub li.on { display: block; }
.service .pad_box { height: 100%; width: 450px; margin: 0 auto;}
.service .p_right { width: 50%; height: 100%; float: right; background: url(/images/Fotolia_108444978_M.jpg) center; background-size: cover;}

.why { background: #f4f4f4; padding-top: 90px; text-align: center;}
.why div { width: 800px; margin: 0 auto; padding-bottom: 70px; }
.why .w_title { color: #444; font-size: 24px; line-height: 2.7;}
.why .w_sub { color: #666; font-size: 15px; line-height: 1.7;}

.portfolio { padding: 90px 0 75px; text-align: center; overflow: auto;}
.portfolio ul { width: 1160px; margin: 0 auto; overflow: auto;}
.portfolio li { width: 260px; height: 385px; margin: 0 15px 20px; float: left; background: #f5f5f5; box-shadow: 0 3px 5px 0 #c1c1c1; }
.portfolio .img_box { height: 285px; padding-top: 40px; text-align: center; }
.portfolio .img_box img { width: 200px; }
.portfolio .p_title { background: #fff; height: 39px; padding-top: 21px; text-align: center; color: #666; font-size: 15px; }
.portfolio .p_title.line02 { height: 47px; padding-top: 13px; }

.about { height: 700px; background: #f4f4f4;}
.about .p_left { width: 50%; height: 100%; float: left; background: url(/images/Fotolia_108714948_M.jpg) center; background-size: cover; }
.about .g_right { width: 50%; height: 100%; float: left; }
.about .g_right .txt_box { padding-top: 90px; }
dl.txt_info { width: 540px; margin: 0 auto;}
dl.txt_info dt { float: left; width: 120px; font-size: 15px; color: #999; padding-bottom: 23px; line-height: 1.7}
dl.txt_info dd { float: left; width: 420px; font-size: 15px; color: #222; padding-bottom: 23px; line-height: 1.7}
dl.txt_info dd img:last-child { margin-left: 10px; }

.about02 { height: 650px; background: #f4f4f4;}
.about02 .img02 { float: right; width: 50%; height: 100%; background: url(/images/Fotolia_109816606_M.jpg) center; background-size: cover; }
.about02 .txt_box { width: 50%; float: left;}
.about02 .txt_box .f_right { width: 420px; margin: 0 auto; }
.about02 .txt_box p { padding-left: 16px; line-height: 1.5;}
.about02 .txt_box .b_title { color: #000; font-size: 24px; margin: 50px 0 20px; }
.about02 .txt_box li { padding-bottom: 10px; }
.about02 .txt_box .title { color: #000; font-size: 15px; background: url(/images/ic_about.png) no-repeat 0 5px; } 
.about02 .txt_box .sub { color: #666; font-size: 15px; }

.contact { padding: 90px 0; overflow: auto; }
.contact .l_map { width: 50%; float: left;}
.contact .l_map .map { float: right; width: 500px; height: 400px; margin-right: 40px; background: url(/images/bg_map.png) center; background-size: cover; }
.contact .r_form { float: left; width: 540px; padding: 10px 0 0 40px; }
.contact .r_form .mail { width: 540px; overflow: auto; }
.contact .r_form .mail li { border-bottom: 2px solid #d4f1fc; overflow: auto;}
.contact .r_form .mail li span { display: inline-block; width: 100px; float: left; padding-top: 20px; font-size: 15px; color: #0eb2f0; font-weight: bold; }
.contact .r_form .mail li div { float: left; width: 440px; padding: 10px 0; }
.contact .r_form .mail li div .b_text { border: 0; height: 38px; width: 440px; font-size: 17px;}
.contact .r_form .mail li div .b_textarea { border: 0; height: 89px; padding-top: 8px; width: 440px; max-width: 100%; font-size: 17px; line-height: 1.5; }
.s_mail { background: #0eb2f0; width: 137px; height: 42px; color: #fff; border: 0; font-size: 15px; margin-top: 20px;cursor:pointer;}

.tripdeal{ padding: 90px 0; overflow: auto; }
.tripdeal .r_form {  width: 100%;max-width:1200px; padding: 10px 0 0 40px;margin:0 auto; }
.tripdeal .form_input{ border:1px solid #DEDEDE;width:60%;height:35px;box-sizing: border-box;padding:10px;display:inline-block;vertical-align:middle;margin-left:20px; }
.tripdeal select{ border:1px solid #DEDEDE;width:60%;height:35px;box-sizing: border-box;padding-left:10px;display:inline-block;vertical-align:middle;margin-left:20px; }
.tripdeal .checkbox{ border:1px solid #DEDEDE;width:25px;height:25px;box-sizing: border-box;display:inline-block;vertical-align:middle;margin-left:20px;margin-right:10px; }
.tripdeal .title{ display:inline-block;vertical-align: middle;width:25%; }
.tripdeal ul li{ margin-top:10px; }
.tripdeal form{ width:100%;display:table; }
.tripdeal form ul{ width:50%;display:table-cell;vertical-align:top; }
.tripdeal .btn_box{ text-align:center;margin-top:20px; }
.tripdeal .form_box{ border:1px solid #DEDEDE;padding:20px; }
.note{ border:1px solid #DEDEDE;resize: none;margin-left:20px;padding:10px;width:60%;box-sizing:border-box;height:100px; }
footer { text-align: center; color: #ddd; background: #7f7f7f; height: 27px; padding-top: 13px; font-size: 13px;}

/* ========================================================================================================================================= */

@media only screen and (min-width: 960px) and (max-width: 1160px) {
	.wrap { min-width: 960px;}
	h2 { font-size: 40px; height: 100px; }
	header { padding: 20px 0; background: rgba(255,255,255,0.7); }
	header .top { width: 920px;}
	header nav a { margin-left: 40px;}

	.service { height: 500px;}
	.service .b_left .txt_box h2 { padding-top: 40px; height: 90px; color: #fff; }
	/*.service .b_left .txt_box { background: url(/images/bg_g_line.png) repeat-y; background-size: 11px; height: 100%; }*/
	/*.service .b_left .txt_box ul.s_title li { background: url(/images/ic_skill_g.png) no-repeat; background-size: 18px !important; color: #454545; font-size: 18px; height: 28px; padding: 3px 0 0 25px; margin-bottom: 0}*/
	/*.service .b_left .txt_box ul.s_title li a { font-size: 18px; }*/
	.service .b_left .txt_box ul.s_sub { padding-top: 10px; }
	.service .b_left .txt_box ul.s_sub li { display: none; color: #c9c9c9; font-size: 15px; padding-left: 25px; line-height: 1.5;}

	.why, .portfolio, .about .g_right .txt_box, .contact { padding-top: 50px; }
	.portfolio { padding-bottom: 50px; }
	.portfolio ul { width: 870px; margin: 0 auto; overflow: auto;}

	dl.txt_info { width: 440px; overflow: auto; }
	dl.txt_info dt { float: left; width: 100px; font-size: 15px; color: #999; padding-bottom: 15px;}
	dl.txt_info dd { float: left; width: 340px; font-size: 15px; color: #222; padding-bottom: 15px;}
	dl.txt_info dd img { width: 100px;}

	.about { height: 550px; }
	.about02 { height: 600px; }
	.about02 .txt_box { width: 50%; margin: 0 auto; }
	.about02 .txt_box p { padding-left: 16px; line-height: 1.4;}
	.about02 .txt_box .b_title { color: #000; font-size: 22px; margin-bottom: 15px; }

	.contact { padding-bottom: 50px; }
	.contact .l_map .map { float: right; width: 440px; height: 400px; margin-right: 20px; }
	.contact .r_form { float: left; width: 440px; padding: 10px 0 0 20px; }
	.contact .r_form .mail { width: 440px; overflow: auto; }
	.contact .r_form .mail li div { float: left; width: 340px; padding: 10px 0; }
	.contact .r_form .mail li div .b_text { border: 0; height: 38px; width: 340px; font-size: 17px;}
	.contact .r_form .mail li div .b_textarea { border: 0; height: 93px; padding-top: 8px; width: 340px; max-width: 340px; font-size: 17px; line-height: 1.5; }
}

/* ========================================================================================================================================= */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.wrap { min-width: 768px; }
	h2 { font-size: 40px; height: 100px; }
	header { padding: 15px 0; background: rgba(255,255,255,0.7); }
	header .top { width: 100%;}
	header .top h1 { margin-left: 15px; }
	header nav { display: none;}
	header .top button { display: block; float: right; border: 0; background: url(/images/ic_menu.png) repeat-x; background-size: 25px; width: 25px; height: 25px; margin-right: 15px;}

	.side_menu { display: none; width: 30%; position: fixed; top: 0; right: 0; height: 100%; min-height: 100%; background: #eee; z-index: 2;}
	.side_menu .close { display: block; float: right; border: 0; background: url(/images/ic_close.png) no-repeat; opacity: 0.3; background-size: 25px; width: 25px; height: 25px; margin: 15px 15px 0 0; }
	.side_menu .menu { padding: 20px; clear: both;}
	.side_menu .menu a { display: block; width: 180px; padding: 10px; margin-bottom: 10px; color: #222; font-size: 17px; font-weight: bold;}

	.home { height: 88px; padding: 306px 0; text-align: center;}
	.home img { width: 80%; }

	.service { height: 400px; }
	.service .p_right { width: 45%; height: 100%; float: right; background-size: cover;}
	.service .b_left { width: 55%; height: 100%; float: left; background: #1a1a1a; }
	.service .pad_box { padding: 0 20px; width: auto; }
	.service .b_left .txt_box h2 { padding-top: 40px; height: 90px; color: #fff; }
	.service .b_left .txt_box { background: url(/images/bg_g_line.png) repeat-y; background-size: 11px; height: 100%; }
	.service .b_left .txt_box ul.s_title li { background: url(/images/ic_skill_g.png) no-repeat; background-size: 18px !important; color: #454545; font-size: 18px; height: 28px; padding: 3px 0 0 25px; margin-bottom: 0}
	.service .b_left .txt_box ul.s_title li a { font-size: 18px; }
	.service .b_left .txt_box ul.s_sub { padding-top: 10px; }
	.service .b_left .txt_box ul.s_sub li { display: none; color: #c9c9c9; font-size: 15px; padding-left: 25px; line-height: 1.5;}

	.why, .portfolio, .about .g_right .txt_box, .contact { padding-top: 50px; }

	.why div { width: 700px; margin: 0 auto; padding-bottom: 70px; }

	.portfolio { padding-bottom: 50px; }
	.portfolio ul { width: 720px; margin: 0 auto; overflow: auto;}
	.portfolio li { width: 210px; height: 323px; margin: 0 15px 20px; float: left; background: #f5f5f5; box-shadow: 0 3px 5px 0 #c1c1c1; }
	.portfolio .img_box { height: 243px; padding-top: 20px; text-align: center; }
	.portfolio .img_box img { width: 170px; }

	dl.txt_info { width: 420px; overflow: auto; }
	dl.txt_info dt { float: left; width: 90px; font-size: 15px; color: #999; padding-bottom: 18px;}
	dl.txt_info dd { float: none; width: 330px; padding-left: 90px; white-space:nomal; word-break:break-all; font-size: 15px; color: #222; padding-bottom: 18px;}
	dl.txt_info dd img { width: 100px;}

	.about { height: 550px; }
	.about .p_left { width: 40%; height: 100%; float: left; background-size: cover; }
	.about .g_right { width: 60%; height: 100%; float: left; background: #f4f4f4; }
	.about02 { height: 550px;}
	.about02 .img02 { width: 40%; float: left; background-size: cover; }
	.about02 .txt_box { width: 60%; margin: 0 auto; }
	.about02 .txt_box .b_title { margin: 20px 0; }
	.about02 .txt_box p { padding-left: 16px; line-height: 1.4;}
	.about02 .txt_box .b_title { color: #000; font-size: 22px; margin-bottom: 15px; }

	.contact { padding-bottom: 50px; }
	.contact .l_map .map { width: 90%; float: none; height: 400px; margin: 0 auto;}
	.contact .r_form { float: left; width: 50%; padding: 10px 0 0 0; }
	.pad_con { padding: 0 20px 0 0; }
	.contact .r_form dl.txt_info { width: 100%; }
	.contact .r_form dl.txt_info dd { width: 270px !important; }
	.contact .r_form .mail { width: 100%; overflow: auto; }
	.contact .r_form .mail li div { float: left; width: 260px; padding: 10px 0; }
	.contact .r_form .mail li div .b_text { border: 0; height: 38px; width: 100%; font-size: 17px;}
	.contact .r_form .mail li div .b_textarea { border: 0; padding-top: 8px; width: 100%; font-size: 17px; line-height: 1.5; }
}

/* ========================================================================================================================================= */

@media only screen and (max-width: 767px) {
	.wrap { min-width: 320px; }
	h2 { font-size: 25px; height: 60px; }
	header { padding: 10px 0; background: rgba(255,255,255,0.7); border-bottom: 1px solid #e0e0e0; }
	header .top { width: 100%; height: 20px;}
	header .top h1 { font-size: 18px; margin-left: 10px; padding-top: 2px; overflow: hidden;}
	header nav { display: none;}
	header .top button { display: block; float: right; border: 0; background: url(/images/ic_menu.png) repeat-x; background-size: 20px; width: 20px; height: 20px; margin-right: 10px;}

	.side_menu { display: none; width: 60%; position: fixed; top: 0; right: 0; height: 100%; min-height: 100%; background: #eee; z-index: 2;}
	.side_menu .close { display: block; float: right; border: 0; background: url(/images/ic_close.png) no-repeat; opacity: 0.3; background-size: 20px; width: 20px; height: 20px; margin: 10px 10px 0 0; }
	.side_menu .menu { padding: 20px 0 20px 20px; clear: both;}
	.side_menu .menu a { display: block; width: 120px; padding: 10px; margin-bottom: 10px; color: #222; font-size: 17px; font-weight: bold;}

	.home { height: 30px; padding: 280px 0; text-align: center;}
	.home img { width: 80%; }

	.service {  width: 100%; height: 100%; background: #1a1a1a; }
	.service .p_right { float: none; width: 100%; height: 240px; background-size: cover;}
	.service .b_left { width: 100%; float: none; background: url(/images/bg_g_line.png) 9px top repeat-y; background-size: 10px}
	.service .pad_box { padding: 0 10px; width: auto;}
	.service .b_left .txt_box { background: none; width: auto; float: none;}
	.service .b_left .txt_box h2 { padding-top: 40px; height: 60px; }
	.service .b_left .txt_box ul.s_title { padding: 0; }
	.service .b_left .txt_box ul.s_title li { background: url(/images/ic_skill_g.png) no-repeat; background-size: 15px; height: 100%; min-height: 18px; padding: 2px 0 0 20px; margin-bottom: 8px; }
	.service .b_left .txt_box ul.s_title li a { color: #454545; font-size: 15px;}
	.service .b_left .txt_box ul.s_title li.on { background: url(/images/ic_skill_r.png) no-repeat; background-size: 15px;}
	.service .b_left .txt_box ul.s_title li.on a { color: #fff; }
	.service .b_left .txt_box ul.s_sub { padding: 0 10px 10px; }
	.service .b_left .txt_box ul.s_sub li { display: none; color: #c9c9c9; font-size: 14px; padding: 0 0 30px 20px; line-height: 1.5;}
	.service .b_left .txt_box ul.s_sub li.on { display: block; }
	
	.why { background: #f4f4f4; padding: 40px 20px 20px 20px; text-align: left;}
	.why div { margin: 0 auto; padding-bottom: 30px; width: 100%; }
	.why div img { width: 60px; float: left; padding: 3px 10px 0 0; }
	.why .w_title { color: #444; font-size: 20px; line-height: 1.2; margin-bottom: 5px;}
	.why .w_sub { color: #666; font-size: 14px; line-height: 1.5;}

	.portfolio { padding: 50px 0 30px; text-align: center; overflow: auto;}
	.portfolio ul { width: 320px; margin: 0 auto; overflow: auto;}
	.portfolio li { width: 140px; height: 236px; margin: 0 10px 20px; float: left; background: #f5f5f5; box-shadow: 0 3px 5px 0 #c1c1c1; }
	.portfolio .img_box { height: 171px; padding-top: 20px; text-align: center; }
	.portfolio .img_box img { width: 120px; }
	.portfolio .p_title { background: #fff; height: 29px; padding-top: 16px; text-align: center; color: #666; font-size: 12px; }
	.portfolio .p_title.line02, .portfolio .p_title.line03 { height: 35px; padding-top: 10px; }
	.portfolio .p_title.line04 { height: 40px; padding-top: 5px; }

	.about { background: #f4f4f4; height: auto; }
	.about .p_left { width: 100%; height: 250px; float: none; background-size: cover; }
	.about .g_right { width: 100%; height: 100%; float: none; background: #f4f4f4; }
	.about .g_right .txt_box { padding: 40px 10px 0 10px; float: none}
	dl.txt_info { width: 100%; overflow: auto; }
	dl.txt_info dt { float: left; width: 100%; font-size: 15px; color: #999; padding-bottom: 5px;}
	dl.txt_info dd { float: left; width: 100%; font-size: 15px; color: #222; padding-bottom: 20px; line-height: 1.2}
	dl.txt_info dd img { width: 130px; }
	dl.txt_info dd img:last-child { margin-left: 5px; }

	.about02 { height: auto; background: #f4f4f4; }
	.about02 .img02 { float: none; width: 100%; height: 250px; background-size: cover; }
	.about02 .txt_box { width: 100%; float: none;  padding: 10px 0 20px;}
	.about02 .txt_box .f_right { width: 100%; float: none; }
	.about02 .txt_box p { padding: 0 10px 0 16px; line-height: 1.5;}
	.about02 .txt_box .b_title { color: #000; font-size: 18px; line-height: 1; margin: 20px 0 10px; padding-left: 26px; }
	.about02 .txt_box li { padding: 0 5px 10px 10px; }
	.about02 .txt_box .title { color: #000; font-size: 14px; background: url(/images/ic_about.png) no-repeat 0 5px; } 
	.about02 .txt_box .sub { color: #666; font-size: 14px; }

	.contact { padding: 40px 0 30px; overflow: auto; }
	.contact .l_map { width: 100%; float: none;}
	.contact .l_map .map { float: none; width: 100%; height: 250px; margin: 0 auto; background: url(/images/bg_map.png) no-repeat; background-size: 100% }
	.contact .pad_con { padding: 20px 10px 0; }
	.contact .r_form { float: none; width: 100%; padding: 0; }
	.contact .r_form .mail { width: 100%; overflow: auto; }
	.contact .r_form .mail li { border-bottom: 2px solid #d4f1fc; overflow: auto; margin-bottom: 10px; }
	.contact .r_form .mail li span { display: inline-block; width: 100%; float: none; padding: 0; font-size: 15px; color: #0eb2f0; font-weight: bold; }
	.contact .r_form .mail li div { float: none; width: 100%; padding: 0;}
	.contact .r_form .mail li div .b_text { border: 0; height: 38px; width: 100%; font-size: 15px;}
	.contact .r_form .mail li div .b_textarea { border: 0; padding-top: 8px; width: 100%; font-size: 15px; line-height: 1.5; }
	.s_mail { background: #0eb2f0; width: 100%; height: 42px; color: #fff; border: 0; font-size: 15px; margin-top: 10px;}

	.tripdeal form ul{ width:100%;display:block; }
}