@charset "utf-8";
/* CSS Document */
html,body{width:100%; height: 100%; position:relative; overflow-x:hidden }
html.open,body.open{ overflow: hidden;}
/* 본문바로가기 */
#skiptoContent { display:block; margin:0; padding:0; z-index:2000}
a.quick_menu {display:block; font-size:1em; left:0; text-align:center; top:-10000px; position:absolute; width:100%; z-index:500;}
a.quick_menu:hover, a.quick_menu:focus, a.quick_menu:active {background:none repeat scroll 0 0 #404b64; color:#fff; font-weight:bold; height:40px; padding:10px 0; position:absolute; top:0; z-index:4000;}

.tnb_wrap{display:none;}

#header_area{ padding:20px 0; height:80px; border-bottom:1px solid rgba(255,255,255,0.1); position:absolute; top:0; left:0; right:0; z-index:2999; background:#fff;}
.gnb_wrap h1 a{display:inline-block;font-family:'Dolbomche';font-size:20px;font-weight:500;position:relative;padding: 11px 0 11px 32px;letter-spacing:-0.5px;}
.gnb_wrap h1 a:before{content:''; display:block; width:30px; height:22px; background:url("/home/gangjin/images/common/logo.png") no-repeat center; background-size:contain; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.gnb_wrap h1 a span{color:#4c5bb9;}
.gnb_wrap .gnb, .gnb_wrap .etc{ display:none;}
.gnb_wrap .m_gnb{ position:fixed; right:-200%; top:0; width:95%; height:100%; padding:0; z-index:3000; transition:cubic-bezier(.17,.67,.83,.67) 0.3s; overflow:scroll;}
.gnb_wrap .m_gnb.open{right:0;}
.gnb_wrap .m_gnb .m_tnb{padding:33px 25px; background:#283e7d; position:relative;}
.gnb_wrap .m_gnb .m_tnb a{color:#fff; display:inline-block; position:relative;}
.gnb_wrap .m_gnb .m_tnb a:first-child{padding-right:20px; margin-right:20px;}
.gnb_wrap .m_gnb .m_tnb a:first-child:after{content:''; display:block; width:3px; height:3px; background:#eee; border-radius:50%; position:absolute; top:50%; transform:translateY(-50%); right:0;}
.gnb_wrap .m_gnb .m_tnb a.m_close{display:block; z-index:2; position:absolute; top:50%; transform:translateY(-50%); right:20px;}
.gnb_wrap .m_gnb .m_tnb a.m_close i{font-size:30px; font-weight:300; color:#fff;}
.gnb_wrap .m_gnb > ul{background:#37519e; overflow-y:auto; height:calc(100% - 82px);}
.gnb_wrap .m_gnb > ul > li{ position:relative; }
.gnb_wrap .m_gnb > ul > li:first-child {border-top:1px solid #5871ba;}
.gnb_wrap .m_gnb > ul > li.has_sub:before{ position:absolute; right:25px; top:27px; transform: translateY(-50%); display:inline-block; content:"\f067"; font-weight:300; font-family: "Font Awesome 5 Pro"; color:#fff; font-size:18px;}
.gnb_wrap .m_gnb > ul > li.has_sub.open:before{ content:"\f068"; color:#fff;}
.gnb_wrap .m_gnb > ul > li > a{ display:block; font-weight:500; padding:20px; border-bottom:1px solid #5871ba; color:#fff;  }
.gnb_wrap .m_gnb > ul > li > ul{ display:none; padding:10px 20px; background:#f6f6f6;}
.gnb_wrap .m_gnb > ul > li > ul > li{ position:relative; }
.gnb_wrap .m_gnb > ul > li > ul > li.has_sub:before{ position:absolute; right:15px; top:20px; transform: translateY(-50%); display:inline-block; content:"\f078"; font-weight:300; font-family: "Font Awesome 5 Pro"}
.gnb_wrap .m_gnb > ul > li > ul > li.has_sub.open:before{ content:"\f077"; }
.gnb_wrap .m_gnb > ul > li > ul > li.has_sub.open > a{ font-weight:bold; color:#263588; border-bottom:1px solid #263588;}
.gnb_wrap .m_gnb > ul > li > ul > li:last-child a{ border-bottom:0; } 
.gnb_wrap .m_gnb > ul > li > ul > li > a{ display:block; padding:15px 15px 15px 23px; border-bottom:1px dashed #ddd; position:relative; }
.gnb_wrap .m_gnb > ul > li > ul > li > a:before{content:''; display:block; width:4px; height:4px; border-radius:50%; background:#5871ba; position:absolute; top:19px; left:10px;}

.gnb_wrap .m_menu_wrap{position:absolute; top:30px; right:20px; z-index:2000;}
.gnb_wrap .m_menu_wrap a{display:inline-block; vertical-align:middle;}
.gnb_wrap .m_menu{width:30px; height:20px; position:relative;}
.gnb_wrap .m_menu span{display:inline-block; text-indent:-9999px; width:30px; height:3px; border-radius:15px; background:#4c5bb9; }
.gnb_wrap .m_menu:before,.gnb_wrap .m_menu:after{ position:absolute; right:0; display:block; content:"";  width:30px; height:3px; border-radius:10px; background:#4c5bb9;  transition:0.2s; }
.gnb_wrap .m_menu:before{ top:50%; margin-top:-1.5px;}
.gnb_wrap .m_menu:after{ bottom:0;}

.gnb_wrap .drawer{position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.7); visibility:hidden; z-index:2000;}
.gnb_wrap .drawer.open{visibility:visible;}

.gnb_wrap .m_menu_wrap .t_search{margin-right:10px;}
.gnb_wrap .m_menu_wrap .t_search i{color:#3f4059; font-size:24px; font-weight:400;}
.gnb_wrap .total_search{display:none; position:absolute; top:80px; left:0; right:0; background:#01253f; text-align:center; z-index:100;}
.gnb_wrap .total_search .container{padding:60px 0 30px 0; position:relative; transition:all 0.5s ease;}
.gnb_wrap .total_search .sch_field{width:calc(100% - 120px); height:50px; line-height:50px; margin-right:5px;}
.gnb_wrap .total_search .sch_btn{width:80px; border:1px solid #ffc600; border-radius:5px; background:#ffc600; font-size:16px; font-weight:500; height:50px; padding:0; margin-bottom:0;}
.gnb_wrap .total_search .sch_close{position:absolute; top:15px; right:30px;}
.gnb_wrap .total_search .sch_close i{color:#fff; font-size:30px;}

.banner_area{padding:27px 0; border-top:1px solid #dedede;}
.banner_title{position:relative; margin-bottom:20px;}
.banner_title h3{font-family:'DWImpactamin'; font-size:18px; font-weight:500;}
.banner_title .banner_controll{position:absolute; top:2px; left:80px; width:60px;}
.banner_title .banner_controll a.pause{margin:0 13px; font-size:13px;}
.banner_title .banner_controll a i{color:#555;}
.banner_list li{ float:left; overflow:hidden; text-align:center; display:inline-block; vertical-align:middle; height:45px; line-height:45px;}
.banner_list li a{display:inline-block; vertical-align:middle; height:45px; line-height:45px;}
.banner_list li a[target="_blank"]:after{display:none;}
.banner_list li a img{max-width:170px;}

.footer_area{padding:30px 0; border-top:1px solid #dedede; background:#3f4059;}
.footer_area .top .ft_logo{font-family:'Dolbomche';font-size:20px;font-weight:500;position:relative;padding: 11px 0 11px 32px;letter-spacing:-0.5px;color:#a6a6a6;width:240px;margin:0 auto;}
.footer_area .top .ft_logo:before{content:''; display:block; width:30px; height:22px; background:url("/home/gangjin/images/common/logo.png") no-repeat center; background-size:contain; position:absolute; top:50%; left:0; transform:translateY(-50%);}

.footer_area .ft_menu{margin:20px 0; display:flex; flex-wrap:nowrap; justify-content:center;}
.footer_area .ft_menu li{padding-left:20px; margin-left:20px; position:relative;}
.footer_area .ft_menu li:after{content:''; width:1px; height:10px; background:#b2afaf; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.footer_area .ft_menu li:first-child{padding-left:0; margin-left:0;}
.footer_area .ft_menu li:first-child:after{display:none;}
.footer_area .ft_menu li a{display:block; color:#fff;}
.footer_area .ft_menu li:first-child a{color:#ffcf2a; font-weight:500;}
.footer_area .copyright p{line-height:1.4; text-align:center; color:#c4c4c4;}
.footer_area .go_top{display:block; background:#2a2a2a; color:#fff; width:80px; height:80px; text-align:center; font-size:16px; padding-top:20px; border-radius:5px; margin:15px auto 0 auto;}
.footer_area .go_top i{color:#fff; font-size:20px;}

.footer_area .ft_quick{margin:20px 0;}
.footer_area .ft_quick li{border-radius:30px; text-align:center;}
.footer_area .ft_quick li:first-child{margin-bottom:10px; background:#d46e1b; border:1px solid #c5671b;}
.footer_area .ft_quick li:last-child{background:#119588; border:1px solid #108d80;}
.footer_area .ft_quick li a{display:block; padding:13px 15px; color:#fff;}
.footer_area .ft_quick li i{color:#fff; margin-left:10px; font-weight:600;}

.ft_quick_pop{ display:none; position:fixed; background:rgba(0,0,0,0.5); left:0; right:0; top:0; bottom:0; z-index:3000; }
.ft_quick_pop .scroll{ position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:80%; height:90%; max-height:500px; max-width:1024px; background:#fff; padding:20px; border-radius: 20px; }
.ft_quick_pop .scroll .quick_close{ position:absolute; top:-70px; left:50%; transform: translateX(-50%); display:inline-block; font-size:50px; text-align: center; cursor:pointer; }
.ft_quick_pop .scroll .quick_close i{ color:#fff;  }
.ft_quick_list{ height:100%; overflow-y: scroll;  }
.ft_quick_list ul li{ margin:5px 0; }
.ft_quick_list ul li a{ position:relative; display:block; padding:10px 25px; font-size:16px; font-weight:bold; color:#252525; line-height: 1; border:#ddd solid 1px; border-radius: 10px; }
.ft_quick_list ul li a:hover{ background:#205696; color:#fff; } 
.ft_quick_list ul li a:after{ position:absolute; right:15px; top:50%; transform: translateY(-50%); display:inline-block; content:"\f105"; font-family: "Font Awesome 5 pro";  font-weight: 500; margin-left:10px; vertical-align: -1px; font-size:25px; }

.container{padding:0 20px;}
.content_area .container{padding:0;}

@keyframes grow {
	0%{background-size:100% 100%;}
    50%{background-size:120% 120%;}
	100% {background-size:100% 100%;}
}

/* 서브템플릿 */
.sub_visual_area{background-size:cover; background-repeat:no-repeat; background-position:center; animation:grow 20s linear infinite;}
.sub_visual_area .sub_title{padding:120px 0 60px 0; text-align:center;}
.sub_visual_area .sub_title h2{color:#fff; font-family:'DWImpactamin'; font-size:30px; font-weight:500; margin-bottom:10px; letter-spacing:2px}
.sub_visual_area .sub_title span{color:rgba(255,255,255,0.7);}

.func_area .container{display:flex; flex-wrap:nowrap; justify-content:space-between; padding-right:10px; background:#4c5bb9;}
.func_area .location{width:calc(100% - 80px)}
.func_area .location > li{display:none; position:relative; z-index:100;}
.func_area .location > li:last-child{display:block;}
.func_area .location > li > a{padding:18px 30px 18px 15px; color:#fff; display:block; position:relative; font-size:14px;}
.func_area .location > li > a:after{content:"\f0d7"; font-family:"Font Awesome 5 Pro"; font-weight:600; position:absolute; top:50%; right:20px; font-size:16px; transform:translateY(-50%);}

.func_area .location > li.open > a:after{content:"\f0de";}
.func_area .location > li > ul{display:none; position:absolute; top:51px; left:0; width:100%; background:#fff; border:1px solid #dedede; z-index:100; padding:10px 0; border-radius:0 0 10px 10px; box-shadow:3px 3px 5px rgb(0 0 0 / 10%); }
.func_area .location > li > ul > li:last-child{border-bottom:0;}
.func_area .location > li > ul > li > a{display:block; padding:15px 20px;}

.func_area .share_box > ul > li{position:relative;}
.func_area .share_box > ul > li > a{font-size:16px; display:block; padding:17px 10px;}
.func_area .share_box > ul > li > a > i{color:#fff; font-weight:500; font-size:19px;}
.func_area .share_box > ul > li .sns_list{display:none; position:absolute; left:50%; transform:translateX(-50%); top:45px; z-index:100;}
.func_area .share_box > ul > li .sns_list li{margin-bottom:3px;}
.func_area .share_box > ul > li .sns_list li:last-child{margin-bottom:0;}
.func_area .share_box > ul > li .sns_list li a{border:1px solid #dedede; background:#fff; display:block; width:35px; height:35px; line-height:35px; border-radius:100px; font-size:16px; text-align: center; transition:0.3s;}
.func_area .share_box > ul > li .sns_list li a:hover{background:#efefef;}
.func_area .share_box > ul > li .sns_list li a i.fa-band{width:16px; height:16px; background:url(/home/gangjin/images/common/sns_band.png) no-repeat center; }
.func_area .share_box > ul > li .sns_list li a i.fa-kakao{width:16px; height:16px; background:url(/home/gangjin/images/common/sns_kakao.png) no-repeat center; }
.func_area .share_box > ul > li .sns_list li a i.fa-kas{width:16px; height:16px; background:url(/home/gangjin/images/common/sns_kas.png) no-repeat center; }
.func_area .share_box > ul > li .sns_list li a i.fa-insta{width:16px; height:16px; background:url(/home/gangjin/images/common/sns_insta.png) no-repeat center; }
.func_area .share_box > ul > li.print{display:none;}

.content{padding:30px 20px;}
.content h3{font-size:22px; text-align:center; margin-bottom:30px; padding-top:20px;}
.content h3 span{position:relative;}
.content h3 span:after{content:''; display:block; width:7px; height:7px; border-radius:50%; background:#37519e; position:absolute; top:-8px; right:-8px;}



@media all and (min-width:480px){
	.gnb_wrap h1 a:before{width:41px; height:30px;}
	.gnb_wrap h1 a{font-size:26px;padding: 8px 0 8px 45px;}
}

@media all and (min-width:640px){
	.footer_area .ft_quick{display:flex; flex-wrap:nowrap; justify-content:space-between;}
	.footer_area .ft_quick li{width:49%}
	.footer_area .ft_quick li:first-child{margin-bottom:0;}
	
	.content h3 span{font-size:28px;}
	.content h3 span:after{width:10px; height:10px; top:-12px; right:-12px;}
	.func_area .location > li > a{font-size:15px;}
	.func_area .location > li > ul > li > a{font-size:14px;}
	
}

@media all and (min-width:768px){
	
	.banner_area .container{position:relative;}
	.banner_title{position:absolute; top:12px; left:10px; margin-bottom:0;}
	.banner_title h3{margin-bottom:0;}
	.banner_title .banner_controll{width:70px;}
	.banner_list_wrap{padding-left:160px;}
	.banner_list li a{font-size:16px; word-break:keep-all;}
	
	.ft_quick_list ul{ display:flex; flex-wrap: wrap; justify-content: space-between }
	.ft_quick_list ul li{ width:45%;}	
	
	/* 서브 */
	.sub_visual_area .sub_title h2{font-size:40px;}
	.content{padding:50px 20px;}
	.content h3{margin-bottom:40px;}
	.content h3 span{font-size:34px;}
	.func_area .container{padding:0;}
	.func_area .location{display:flex; flex-wrap:nowrap; align-items:center;}
	.func_area .location > li{display:block;}
	.func_area .location > li:after{content:''; display:block; width:1px; height:18px; background:rgba(255,255,255,0.3); position:absolute; right:0; top:50%; transform:translateY(-50%);}
	.func_area .location > li > a{padding:25px 55px 25px 20px;}
	.func_area .location > li:first-child > a{padding:23px 20px;}
	.func_area .location > li:first-child > a i{color:#fff; font-weight:600; font-size:18px;}
	.func_area .location > li > a:after{right:20px;}
	.func_area .location > li:first-child > a:after{display:none;}
	.func_area .share_box > ul > li > a{padding:23px 20px;}
	.func_area .share_box > ul > li .sns_list{top:55px;}
	
}
 
@media all and (min-width:1024px){
	.banner_title h3{font-size:20px;}
	
	.footer_area{padding:40px 0;}
	.footer_area .container{position:relative;}
	.footer_area .top{display:flex; flex-wrap:nowrap; align-items:end;}
	.footer_area .top .ft_logo{margin:0;}
	.footer_area .ft_menu{margin:0 0 10px 30px;}
	.footer_area .copyright{margin-top:30px;}
	.footer_area .copyright p{text-align:left; font-size:15px;}
	.footer_area .copyright p.add{margin-top:5px;}
	.footer_area .go_top{position:absolute; bottom:-12px; right:30px; margin-top:0;}

	.footer_area .container{position:relative;}
	.footer_area .ft_quick{position:absolute; top:0; right:20px; width:490px; margin:0;}
	.footer_area .ft_quick li a{font-size:14px;}
	
	/* 서브 */
	.sub_visual_area .sub_title{padding:150px 0 80px 0;}
	.sub_visual_area .sub_title h2{font-size:50px; margin-bottom:20px;}
	.sub_visual_area .sub_title span{font-size:18px;}
	.func_area .location > li > a{padding:25px 90px 25px 35px;}
	.func_area .share_box > ul{display:flex; flex-wrap:nowrap;}
	.func_area .share_box > ul > li.print{display:block;}
	
	.content{padding:70px 20px;}
	.content h3{margin-bottom:50px;}
	.content h3 span{font-size:38px;}
	
}

@keyframes gnbAni {
	0% {transform:translateY(20px); opacity:0; }
	100% {transform:translateY(0); opacity:1; }
}

@media all and (max-width:1299px){
	.gnb_wrap .t_search{display:none;}
}

@media all and (min-width:1300px){
	
	.container{width:1300px; margin:0 auto;}
	
	.tnb_wrap{display:block; background:#4c5bb9;}
	.tnb_wrap .container{display:flex; flex-wrap:nowrap; justify-content:end;}
	.tnb_wrap ul{text-align:right; padding:13px 0;}
	.tnb_wrap ul li{display:inline-block; margin-left:15px; padding-left:15px; position:relative;}
	.tnb_wrap ul li:before{content:''; display:block; width:1px; height:15px; background:rgba(255,255,255,0.5); position:absolute; top:50%; transform:translateY(-50%); left:0;}
	.tnb_wrap ul li:first-child:before{display:none;}
	.tnb_wrap ul li a{color:#fff; font-size:13px; font-weight:300;}
	.tnb_wrap ul li a i{margin-right:3px; color:#fff;}
	
	.tnb_wrap .tnb_left{padding:0;}
	.tnb_wrap .tnb_left li{margin-left:0;}
	.tnb_wrap .tnb_left li a{display:block; padding:13px 20px; color:#fff; background:#0b48a0;}

	.gnb_wrap .m_menu, .gnb_wrap .m_menu_wrap, .m_gnb{display:none;}
	.gnb_wrap .gnb{display:block; margin-right:80px;}
	.gnb_wrap .container{position:relative;}
	.gnb_wrap .container:after{content:''; display:block; clear:both;}
	
	#header_area{ background:#fff; padding:0; position:absolute; width:100%;  height:130px; border-bottom:1px solid #eee; transition: 0.3s; z-index: 1000;}
	#header_area:after{ display:block; width:1px; position:absolute; top:130px; left:50%; transform: translateX(-50%); height:1px; background:#dfe2f4; content:""}
	#header_area .container{padding:0;}
	#header_area .logo{ float:left; margin-top:20px;}
	
	.gnb{ float:right; display:inline-block; vertical-align:middle; position:relative;}
	.gnb > ul > li{position:relative; float:left;}
	.gnb > ul > li > a{display:block; font-weight:500; padding:35px 50px; word-break: keep-all; font-size:19px;}
	.gnb > ul > li > .gnb_sub{display:none; position:absolute; left:50%; top:88px; transform:translateX(-50%); width:100%; height:550px; border-left:1px solid #eee;  z-index: 100; padding-top:15px;}
	.gnb > ul > li > .gnb_sub > li{opacity:0; animation:gnbAni 1s ease; animation-fill-mode:forwards; text-align:center;}
	.gnb > ul > li > .gnb_sub > li > a{display:block; font-size:14px; padding:15px 0;}
	.gnb > ul > li:last-child > .gnb_sub{border-right:1px solid #eee;}
	.gnb > ul > li > .gnb_sub:hover{background:#f6f9fe;}
	
	#header_area.on{height:450px; transition:0.3s; overflow:hidden;}
	#header_area.on:after{width: 100%; transition:1s }
	#header_area.on .gnb > ul > li > .gnb_sub{display:block;}
	#header_area.on .gnb > ul > li > .gnb_sub > li > a:hover{color:#37519e; font-weight:500;}
	#header_area.on .gnb > ul > li > a{color:#555;}
	#header_area.on .gnb > ul > li.on > a{color:#37519e;}
	#header_area.on .gnb > ul > li.on:after{content:''; display:block; height:3px; background:#37519e; position:absolute; bottom:0; left:0; right:0;}
	
	.gnb_wrap .t_search{position:absolute; top:50%; transform:translateY(-50%); right:20px;}
	.gnb_wrap .t_search i{font-size:24px; font-weight:400; color:#3f4059;}
	.gnb_wrap .total_search{top:130px;}
	.gnb_wrap .total_search .container{padding:30px 0!important;}
	.gnb_wrap .total_search .sch_field{width:500px;}
	.gnb_wrap .total_search .sch_close{top:50%; transform:translateY(-50%); right:200px;}
	
	.banner_title .banner_controll{left:120px;}
	.banner_list_wrap{padding-left:220px;}
	
	.footer_area .go_top{bottom:-25px;}
	
	/* 서브 */
	.sub_visual_area .sub_title{padding:260px 0 135px 0;}
	.sub_visual_area .sub_title h2{font-size:60px;}

	.func_area{position:relative; border-radius:10px 0 0 10px; margin-top:-33px;}
	.func_area:after{content:''; display:block; width:100%; height:100%; background:#4c5bb9; position:absolute; top:0; right:-50%;}
	.func_area .container{position:relative; z-index:100; border-radius:10px 0 0 10px;}
	.func_area .location{padding-left:10px;}
	.func_area .location > li > a{font-size:16px;}
	
	.content{margin:70px auto 100px auto; padding:0;}
	.content .container{padding:0;}
	.content h3{margin-bottom:60px;}
	.content h3 span{font-size:40px;}

}
@media all and (min-width:1400px){
	.content_area .container{width:1400px;}
	.ft_quick_pop .scroll{ height:auto; }
	.ft_quick_list ul{ justify-content: flex-start; }
	.ft_quick_list ul li{ width:24%; margin-right:1.33333%; }	
	.ft_quick_list ul li:nth-child(4n){ margin-right:0; }
	.ft_quick_list ul li a{ padding:15px 30px; }
}

/* 레이어팝업 */
.layer_pop{max-width:100%; height:auto!important;  border:1px solid #dedede!important;}
.layer_pop a{display:block;}
.layer_pop img{max-width:100%;}
.layer_pop p{margin-top:-2px;}
@media all and (max-width:1023px){
	.layer_pop{top:20px!important; left:0!important;}
}