@charset "utf-8";


/* main css */
label, input, select{vertical-align:middle;}

/* ========== 01. layout ========== */
/* body{overflow-x:hidden;} */
#wrap{width:100%}
#header{width:100%;}
#container{width:100%;}
#footer{width:100%;}


body {overflow-x: hidden;}


#m_bt_quick{display:none;}
.m_quick_wrap{display:none;}


/* header */
#header {position: fixed; width: 100%; top: 0px; left: 0px; z-index: 1000;}
#header .h_wrap {background: rgba(255,255,255,0); padding: 0 15px; transition: background 0.3s; box-sizing: border-box;}
#header .h_wrap::before {content: ''; width: 100%; height: 1px; background-color: rgba(255,255,255,0.2); position: absolute; bottom: 0px; left: 0px; display: block; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;}
#header .h_inner {max-width: 1800px; width: 100%; margin: 0 auto; position: relative; box-sizing: border-box; padding-left:260px; -webkit-transition: padding 0.3s; -moz-transition: padding 0.3s; transition: padding 0.3s;}
#header .logo {position: absolute; width: 245px; height: 34px; background: url('../img/common/logo_w.png') no-repeat center; top: 33px; left: 0px; font-size: 0px; color: transparent; transition: background 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;}

#header .menu_box .dep2_wrap > li > a.colOn {color: #111111;}

body#sub #header .h_wrap{background: rgba(255,255,255,1);}
body#sub #header.scroll .h_wrap::before{background-color: #eee;}




/* footer */
body#sub #footer{margin-top:100px;}
#footer {background-color: #333; padding: 0 15px; box-sizing: border-box;}
#footer .f_inner {max-width: 1400px; width: 100%; margin: 0 auto; position: relative; text-align: left; padding-top:60px;}
#footer .foot_menu{width:100%; position:relative; padding-top:4px;}
#footer .foot_menu > a h1{width:245px; height:34px; background:url('../img/common/foot_logo.png') 0 0 no-repeat; font-size:0; overflow:hidden; text-indent:-99999; position:absolute; top:0; left:0;}
#footer .foot_menu > div{width:100%; text-align:right; padding-left:345px;}
#footer .foot_menu > div > ul{width:800px; display:inline-block; text-align:left; overflow:hidden;}
#footer .foot_menu > div > ul > li{width:20%; float:left;}
#footer .foot_menu > div > ul > li > a{display:block; font-size:16px; color:white; font-weight:700; line-height:100%;}
#footer .foot_menu > div > ul > li ul{padding-top:12px;}
#footer .foot_menu > div > ul > li ul li{margin-top:12px;}
#footer .foot_menu > div > ul > li ul li a{display:block; font-size:16px; color:#aaa; font-weight:500; line-height:100%;}
#footer .foot_info{width:100%; display:table; table-layout:fixed; border-top:1px solid #666; padding:30px 0; margin-top:80px;}
#footer .foot_info ul{width:calc(100% - 380px); display:table-cell; vertical-align:top; font-size:0;}
#footer .foot_info ul li{display:inline-block; margin-left:36px; font-size:0;}
#footer .foot_info ul li:first-child{margin-left:0;}
#footer .foot_info ul li span{color:white; display:inline-block; font-size:16px;}
#footer .foot_info ul li div{display:inline-block; font-size:16px; color:#aaa; padding-left:6px;}
#footer .foot_info p{width:380px; display:table-cell; vertical-align:top; text-align:right; font-size:15px; color:#777777;}


body#main #s_quick_wrap{display:none;}
body#main #m_bt_quick{display:none;}
#s_quick_wrap{width:120px; position:fixed; top:50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); box-shadow: 0 10px 20px 0px rgba(0,0,0,0.1); border-radius:20px 0 0 20px; overflow:hidden; z-index:100;}
#s_quick_wrap ul{}
#s_quick_wrap ul li{}
#s_quick_wrap ul li a{width:100%; height:100px; display:block; text-align:center; font-size:15px; color:white; line-height:18px; position:relative; padding-top:50px;}
#s_quick_wrap ul li.box01 a, #s_quick_wrap ul li.box04 a{padding-top:60px;}
#s_quick_wrap ul li a:before{content:''; position:absolute; left:50%; margin-left:-13px; width:26px; height:26px;}
#s_quick_wrap ul li.box01 a:before{background:url('../img/common/quick_icon01.png') 0 0 no-repeat; top:22px;}
#s_quick_wrap ul li.box02 a:before{background:url('../img/common/quick_icon02.png') 0 0 no-repeat; top:18px;}
#s_quick_wrap ul li.box03 a:before{background:url('../img/common/quick_icon03.png') 0 0 no-repeat; top:18px;}
#s_quick_wrap ul li.box04 a:before{background:url('../img/common/quick_icon04.png') 0 0 no-repeat; top:22px;}
#s_quick_wrap ul li a span{display:inline-block; font-size:12px;}
#s_quick_wrap ul li.box01 a{background:#03c157;}
#s_quick_wrap ul li.box02 a{background:#30a0fc;}
#s_quick_wrap ul li.box03 a{background:#1e649e;}
#s_quick_wrap ul li.box04 a{background:#04abc2;}







/* PC */
@media all and (min-width:1025px){
.pc_show{ display:block !important;}
.pc_i_show{ display:inline-block !important;}
.m_show{ display:none !important;}
.m_i_show{ display:none !important;}
	

	
	/* header */
	#header .menu_bg {position: fixed; width: 100%; height: 0; background-color: #eee; top: 100px; left: 0px; box-sizing: border-box; transition: height 0.3s;}
	#header .menu_box {text-align: right;}
	#header .menu_box .dep1_wrap {font-size: 0px; display: inline-block;}
	#header .menu_box .dep1 {display: inline-block; position: relative;}
	#header .menu_box .dep1 > a {font-size: 18px; font-weight:700; display: block; color: #ffffff; padding: 0 48px; line-height: 100px; position: relative; transition: all 0.3s; z-index: 1;}
	#header .menu_box .dep1 > a::before {content: ''; width: 0%; height: 3px; background-color: #03c157; position: absolute; bottom: 0px; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); transition: all 0.3s;}
	#header .menu_box .dep1:hover > a::before {width: 100%;}
	#header .menu_box .dep1 > a.on::before {width: 100%;}
	#header .menu_box .dep2_wrap {position: absolute; text-align: center; width: 100%; left: 0px; height: 0!important; transition: all 0.3s; overflow: hidden; box-sizing: border-box; display: block!important;}
	/*
	#header .menu_box .dep2_wrap > li {margin-bottom: 16px;}
	#header .menu_box .dep2_wrap > li:last-child {margin-bottom: 0px}
	*/
	#header .menu_box .dep2_wrap > li > a {display: block; font-size: 16px; color: #666; font-weight:500; word-break: keep-all; transition: all 0.3s; padding:14px 0;}
	#header .menu_box .dep2_wrap > li > a:hover {color: #111; text-decoration:underline;}
	
	#header.on .h_wrap {background-color: #fff;}
	#header.on .h_wrap::before {display: block;}
	#header.on .menu_bg {height: 176px;}
	#header.on .logo {background: url('../img/common/logo_c.png') no-repeat center;}
	#header.on .menu_box .dep1 > a {color: #111111;}
	#header.on .menu_box .dep2_wrap {height: 176px !important; padding: 16px 0 !important;}
	#header .menu_box .dep1 > a:hover{color:#03c157;}
	#header .menu_box .dep1:hover > a{color:#03c157;}
	
	#header.col2 .h_wrap{background: rgba(255,255,255,1);}
	#header.col2 .h_wrap::before{background-color: #eee;}
	#header.col2 .logo{background: url('../img/common/logo_c.png') no-repeat center;}

	#header.col2 .menu_box .dep1 > a{color:#111;}
	#header.col2 .menu_box .dep1 > a:hover{color:#03c157;}
	#header.col2 .menu_box .dep1:hover > a{color:#03c157;}

	body#sub .menu_box .dep1 > a{color:#111;}
	body#sub #header .menu_box .dep1 > a:hover{color:#03c157;}
	body#sub #header .menu_box .dep1:hover > a{color:#03c157;}
	body#sub #header .logo{background: url('../img/common/logo_c.png') no-repeat center;}

	
}

@media all and (max-width:1470px){
	#header .h_inner {padding: 0 0 0 320px;}
}

@media all and (max-width:1300px){

	#header .h_inner{padding:0 0 0 280px;}
	#header .menu_box .dep1 > a{padding:0 36px;}


	/* footer */
	#footer .foot_menu > div{padding-left:300px;}
	#footer .foot_menu > div > ul{width:680px;}
	#footer .foot_menu > div > ul > li > a{font-size:15px;}
	#footer .foot_menu > div > ul > li ul li a{font-size:15px;}
	#footer .foot_info ul{width:calc(100% - 300px);}
	#footer .foot_info ul li{margin-left:24px;}
	#footer .foot_info ul li span{font-size:15px;}
	#footer .foot_info ul li div{font-size:15px;}
	#footer .foot_info p{width:300px; font-size:14px;}


	#s_quick_wrap{width:100px;}

}



@media all and (max-width:1150px){
	
	#footer .foot_info{display:block;}
	#footer .foot_info ul{width:100%; display:block;}
	#footer .foot_info p{width:100%; display:block; text-align:left; margin-top:10px;}


}



/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){	
	.pc_show{ display:none !important;}
	.pc_i_show{ display:none !important;}
	.m_show{ display:block !important;}
	.m_i_show{ display:inline-block !important;}
	
	#s_quick_wrap{display:none;}

	/* header */
	#header > div[data-aos=fade-down] {transform: translateZ(0)!important; opacity: 1!important;}
	#header .h_inner {height: 70px; padding: 0px;}
	body#main #header .logo {width: 173px; height: 24px; background: url('../img/common/logo_w.png') no-repeat center; background-size: 100%; top: 23px;}
	body#main #header.scroll .logo {width: 173px; height: 24px; background: url('../img/common/logo_c.png') no-repeat center; background-size: 100%; top: 23px;}
	body#sub #header .logo {width: 173px; height: 24px; background: url('../img/common/logo_c.png') no-repeat center; background-size: 100%; top: 23px;}
	body#main #header.mon .logo {width: 173px; height: 24px; background: url('../img/common/logo_c.png') no-repeat center; background-size: 100%; top: 23px;}

	#header .menu_btn {position: absolute; width: 25px; height: 20px; top: 25px; right: 0px; cursor: pointer;}
	#header .menu_btn span {position: absolute; left: 0px; background-color: white; width: 100%; height: 2px; transition: all 0.3s;}
	#header .menu_btn span:nth-child(1) {top: 0px;}
	#header .menu_btn span:nth-child(2) {top: 9px;}
	#header .menu_btn span:nth-child(3) {bottom: 0px}
	#header.scroll .menu_btn span, #header.mon .menu_btn span{background-color:#000;}
	body#sub #header .menu_btn span{background-color:#000;}

	#header .menu_box {position: fixed; width: 100%; height: calc(100% - 70px); top: 70px; left: 0px; background-color: #fff; visibility: hidden; opacity: 0; transition: opacity 0.3s; overflow-y: auto;}
	#header .menu_box .dep1_wrap {padding: 24px 32px;}
	#header .menu_box .dep1 {border-top:1px solid #ddd; padding:20px 0 16px;}
	#header .menu_box .dep1:first-child{border-top:0;}
	#header .menu_box .dep1 > a {display: block; font-size: 18px; font-weight: 700; color: #333; position: relative; line-height: 24px; padding:0 0 0 34px;}
	#header .menu_box .dep1 > a::before {content: ''; width: 25px; height: 26px; margin-top: -13px; position: absolute; left: 0px; top: 50%; transition: all 0.3s;}
	#header .menu_box .dep1.dep01 > a::before{background:url('../img/common/m_menu_icon01.png') 0 0 no-repeat; background-size:100%;}
	#header .menu_box .dep1.dep02 > a::before{background:url('../img/common/m_menu_icon02.png') 0 0 no-repeat; background-size:100%;}
	#header .menu_box .dep1.dep03 > a::before{background:url('../img/common/m_menu_icon03.png') 0 0 no-repeat; background-size:100%;}
	#header .menu_box .dep1.dep04 > a::before{background:url('../img/common/m_menu_icon04.png') 0 0 no-repeat; background-size:100%;}
	#header .menu_box .dep1.dep05 > a::before{background:url('../img/common/m_menu_icon05.png') 0 0 no-repeat; background-size:100%;}
	#header .menu_box .dep2_wrap{width:100%; overflow:hidden; margin-top:8px;}
	#header .menu_box .dep2_wrap > li {width:50%; float:left; padding-left:34px;}
	#header .menu_box .dep2_wrap > li > a {display:block; font-size: 15px; font-weight:500; color: #666; padding:5px 0;}
	#header .menu_box .dep2_wrap > li.on > a {color: #111111;}
	
	/*#header .h_wrap{background: rgba(255,255,255,1);}*/
	#header.scroll .h_wrap{background: rgba(255,255,255,1);}
	#header.scroll .h_wrap::before{background-color: #eee;}
	/*#header .h_wrap::before{background-color: #eee;}*/

	#header.mon .h_wrap {background-color: #fff;}
	#header.mon .h_wrap::before {display: block;}
	#header.mon .menu_btn span:nth-child(1) {transform: rotate(135deg); top: 50%;}
	#header.mon .menu_btn span:nth-child(2) {opacity: 0;}
	#header.mon .menu_btn span:nth-child(3) {transform: rotate(-135deg); bottom: auto; top: 50%;}
	#header.mon .menu_box {visibility: visible; opacity: 1;}


	.m_quick_wrap{width:100%; display:block;}
	.m_quick_wrap ul{font-size:0;}
	.m_quick_wrap ul li{width:25%; display:inline-block; vertical-align:top;}
	.m_quick_wrap ul li a{display:block; width:100%; height:80px; font-size:12px; color:white; text-align:center; font-weight:600; position:relative; padding-top:40px;}
	.m_quick_wrap ul li.box01 a, .m_quick_wrap ul li.box04 a{padding-top:48px;}
	.m_quick_wrap ul li a:before{content:''; position:absolute; left:50%; margin-left:-13px; width:22px; height:22px; top:12px;}
	.m_quick_wrap ul li.box01 a:before{background:url('../img/common/quick_icon01.png') 0 0 no-repeat; background-size:100%;}
	.m_quick_wrap ul li.box02 a:before{background:url('../img/common/quick_icon02.png') 0 0 no-repeat; background-size:100%;}
	.m_quick_wrap ul li.box03 a:before{background:url('../img/common/quick_icon03.png') 0 0 no-repeat; background-size:100%;}
	.m_quick_wrap ul li.box04 a:before{background:url('../img/common/quick_icon04.png') 0 0 no-repeat; background-size:100%;}
	.m_quick_wrap ul li.box01 a{background:#03c157;}
	.m_quick_wrap ul li.box02 a{background:#30a0fc;}
	.m_quick_wrap ul li.box03 a{background:#1e649e;}
	.m_quick_wrap ul li.box04 a{background:#04abc2;}

	/* footer */
	body#sub #footer{margin-top:50px;}
	#footer .f_inner {max-width: 100%; padding-top:50px;}
	#footer .foot_menu{padding-top:0;}
	#footer .foot_menu > a h1{width:173px; height:24px; background-size:100%; position:relative;}
	#footer .foot_menu > div{display:none;}
	#footer .foot_info{padding:20px 0; margin-top:20px;}
	#footer .foot_info ul li{display:block; margin-left:0; margin-top:8px; line-height:20px;}
	#footer .foot_info ul li span{font-size:14px; width:60px; vertical-align:top;}
	#footer .foot_info ul li div{font-size:14px; padding-left:0; vertical-align:top;}
	#footer .foot_info ul li:first-child{margin-top:0;}
	#footer .foot_info p{width:100%; font-size:13px; margin-top:30px;}


}


/* 모바일 */
@media all and (max-width:768px){
	
	#m_cont01{height:calc(100vh - 50px);}

	#m_bt_quick{display:block; width:100%; position:fixed; bottom:0; left:0; z-index:100; box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);}
	#m_bt_quick ul{width:100%; overflow:hidden;}
	#m_bt_quick ul li{width:50%; float:left; position:relative;}
	#m_bt_quick ul li:before{content:''; position:absolute; top:50%; left:0; width:1px; height:16px; margin-top:-8px; background:#9ae6bc;}
	#m_bt_quick ul li:first-child:before{display:none;}
	#m_bt_quick ul li a{display:block; background:#03c157; text-align:center; line-height:50px;}
	#m_bt_quick ul li a span{display:inline-block; font-size:16px; color:white; font-weight:600; line-height:100%; position:relative; padding-left:28px;}
	#m_bt_quick ul li a span:before{content:''; position:absolute; top:50%; left:0; margin-top:-9px; width:18px; height:18px;}
	#m_bt_quick ul li.mbq01 a span:before{background:url('../img/common/m_bt_quick_icon01.png') 0 0 no-repeat; background-size:100%;}
	#m_bt_quick ul li.mbq02 a span:before{background:url('../img/common/m_bt_quick_icon02.png') 0 0 no-repeat; background-size:100%;}
	
	#wrap{padding-bottom:50px;}


}