/*
@import url("layout.css");
@import url("common.css");
*/

/* sub_visual */
#sub_visual{position:relative;width:100%;margin:0 auto;text-align:center;height:168px;overflow:hidden; }
#sub_visual ul{position:relative;margin:0 auto;text-align:center;width:100%;}
#sub_visual li{position:absolute;left:50%;margin-left:-960px;height:331px;font-size:0;padding:0}
#sub_visual h1{position:absolute;width:1200px; left:50%;margin-left:-600px; top:60px; text-align:left; color:#fff; font-size:36px; font-weight:500; z-index:999; letter-spacing:-1px; line-height:35px;}
#sub_visual h1 span{font-size:20px;font-weight:100}

.contents_box {position:relative;width:100%;float:left}


/*연혁*/
.con_bg {width:900px; height:195px; background:url("../images/contents/history_bg.jpg")no-repeat;}
.con_bg h1 {margin:0 auto; color:#484848; font-size:24px; font-weight:400; text-align:center;}
.con_bg h1:first-child {font-size:30px; color:#b36a23; font-weight:600; padding-top:57px; margin-bottom:5px;}

.con {width:100%; padding:55px 0; border-bottom:1px solid #ececec;}
.con:last-child {border-bottom: none;}
.con:after {content:""; display:block; clear:both;}
.con h1 {float:left;width:200px; font-size:40px; color:#a90056; padding-left:61px; }
.con ul {float:left; width:602px; }

.con ul li {font-size:16px; line-height:32px; background:url("../images/contents/bullet.png")no-repeat left 15px; padding-left:10px; }


.contents_box {text-align: left;}
h4.tit {padding-left: 28px; margin: 30px 0 15px 0; text-align: left; font-size: 18px; font-weight: 400; color: #333; position: relative;}
h4.tit::before {content:""; position: absolute; left: 0; top: 6px; background: url(/resources/site/hrc/resource/images/contents/symbol.png) center center no-repeat; background-size: cover; width: 23px; height: 16px;}
h5.sub_tit {font-size: 15px; font-weight: 600; color: #aa0056; margin-bottom: 7px;}
.txt_box {padding: 25px; border: 1px solid #eaeaea; box-sizing: border-box; background: #f9f9f9; line-height: 1.8; position: relative; text-align: left;}
.txt_box2 {padding: 25px; border: 1px solid #eaeaea; box-sizing: border-box; background: #fff; line-height: 1.8; position: relative; text-align: left;}
.txt_box2::before {content: ""; position: absolute; left: 5px; top: 5px; width:  100%; height:  100%; background: #eaeaea; z-index: -1; }
ol.ol_list {padding-left: 17px;}
ol.ol_list li {list-style: auto; list-style-position: inherit; margin: 7px 0;}
ul.ul_list {padding-left: 17px;}
ul.ul_list li {margin: 7px 0; list-style: none; position: relative;}
ul.ul_list li::before {content: ""; position: absolute; left: -10px; top: 8px; width: 2px; height: 2px; border-radius: 50%; background: #555;}
.process_list {display: flex; justify-content: space-between; align-items: center; margin-top: 8px;}
.process_list li {color: #555; padding: 11px 20px; background: #f0f3f5; border-radius: 4px; position: relative;}
.process_list li + li::before {content: ""; position: absolute; left: -30px; top: 10px; background: url(/resources/site/hrc/resource/images/contents/arrow.svg) center center no-repeat; background-size: 100%; width: 20px; height: 20px;}
h5.rule_tit {font-size: 18px; color: #333; margin: 50px 0 25px; position: relative; padding-left: 10px; line-height: 1;}
h5.rule_tit::before {content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #aa0056;}
h6.rule_sub_tit{font-size: 16px; font-weight: 700; color: #333; margin: 20px 0 10px; display: block;}
h6.rule_sub_tit:nth-of-type(1) {margin-top: 0;}
p.rule_txt {line-height: 1.8; color: #555; margin-bottom: 5px;}
.root_daum_roughmap_landing {width: 100%!important;}
.root_daum_roughmap .wrap_controllers {display: none!important;}
.link_list {display: flex; flex-wrap: wrap; border: 1px solid #eaeaea; border-bottom: 0; border-right: 0; box-sizing: border-box;}
.link_list li {width: calc(100% / 3); box-sizing: border-box; border-bottom: 1px solid #eaeaea; border-right: 1px solid #eaeaea; display: flex; align-items: center;}
.link_list li a {width: 100%; display: block; padding: 20px 40px 20px 20px; box-sizing: border-box; transition: .5s; position: relative;}
.link_list li a:hover {background: #f0f3f5; transition: .5s; text-decoration: underline; text-underline-position: under;}
.link_list li a::after {content:""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(/resources/site/hrc/resource/images/contents/link.svg) center center no-repeat; background-size: 100%; width: 15px; height: 15px;}
.text_center {text-align: center;}
.text_center .btn {font-size: 14px; color: #fff; background: #5ea6d5; border: none; padding: 15px 40px; display: inline-block;}
.text_center .btn:hover {background: #0168b7;}

.pop {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; display: none;}
.pop_bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; background: rgba(0,0,0,.4); display: none;}
.pop .pop_container {max-width: 800px; width: 90%; max-height: 600px; overflow: hidden;  position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);background: #fff; border-radius: 4px; padding: 20px; box-sizing: border-box; z-index: 9999;}
.pop .tit_wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
.pop h4.tit {margin: 0;}
.pop .cls {background: url(/resources/site/hrc/resource/images/contents/close.svg); border: none;}
.pop .cls span {opacity: 0;}
.pop .pop_container .pop_inner {width: 100%; height: 400px; overflow-y: overlay; overflow-x: hidden; padding: 0 10px; box-sizing: border-box;}
.pop .pop_container .pop_inner::-webkit-scrollbar {background: transparent; width: 3px;}
.pop .pop_container .pop_inner::-webkit-scrollbar-thumb {background: rgba(0,0,0,.2); width: 5px; border-radius: 10px;}
.pop .text_center {margin-top: 15px;}
.pop .txt_box {border: 1px solid #aa0056; color: #aa0056;}
.pop .essential_txt {text-align: right; margin-bottom: 5px;}
.pop .essential {color: #ff0000;}
.pop .pop_input {width: 100%; box-sizing: border-box; border: 1px solid #ddd; color: #555; padding: 8px; outline: none;}
.pop .pop_input:focus {outline: 1px solid #aa0056;}
.pop .cmt_info {margin-top: 5px; color: #0f2c62;}
.pop .pop_tbl_wrap {width: 100%; margin-bottom: 30px;}
.pop .tbl_default {table-layout: fixed;}
.pop .tbl_default tbody th {text-align: left; padding: 10px; font-weight: 400; word-break: keep-all;}
.pop .tbl_default tbody td {text-align: left; padding: 10px;}


/*************** Mobile Device ***************/
@media all and (max-width:767px) {

	/* sub_visual */
	#sub_visual{display:none;}

	/*연혁*/
	.con_bg {width:100%; height:auto; padding:50px 0;}
	.con_bg h1 {margin:0 auto; font-size:1.4em; text-align:center; padding:0 1%;}
	.con_bg h1:first-child {font-size:1.7em; font-weight:600; padding-top:0; }

	.con {width:100%; padding-left:2%;}
	.con:last-child {border-bottom:none;}
	.con h1 {float:none; width:100%; padding-left:6%; text-align:left;}
	.con ul {float:none; width:90%; margin:0 auto; margin-top:20px; }
	.con ul li {font-size:16px; line-height:32px;  padding-left:10px; text-align:left;}

	.process_list {flex-wrap: wrap;}
	.process_list li {width: 100%; text-align: center; margin-bottom: 30px;}
	.process_list li + li::before {left: 48%; top: -15px; transform: rotate(90deg) translateX(-50%);}
	.link_list li {width: 100%;}

	.pop .pop_container {padding: 15px 5px;}
	.pop .txt_box {padding: 10px;}

}