@charset "utf-8"; 

/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#subContainer {position: relative; width: 100%;}
.sub-tab {height: 50px; border-bottom: 1px solid #ddd; text-align: center;}
.sub-tab > ul:after {content: ""; display: block; clear: both;}
.sub-tab li a {display: inline-block; width: 100%; height: 50px; text-align: center; line-height: 50px; font-size: 18px; color: #555; font-weight: 400; border-left: 1px solid #ddd;}
.sub-tab li a:hover {background: #e1e1e1;}
.sub-tab li.active a {color: #fff; background: #ffc90f;}
.sub-tab.fixed {z-index: 555; position: relative; ; top: 0; left: 0; width: 100%; background: #fff;}
.sub-tab > ul li {position: relative; display: inline-block; float: left; width: 300px; height: 50px;}
.sub-tab .col-5 li {width: 20%;}
.title-divider {text-align: left; margin: 0.5em 0 1em; background: #ffffff url(/images/basic_resp/img/bg_divider.png) left center repeat-x; padding: 0;}
.title-divider span {background: #ffffff; padding-right: 0.5em; font-weight: 500;}
.title-divider small {display: block; color: rgba(51, 51, 51, 0.6);}/* 서브상단 페이지네비 */
.whois-sub-page-guide {background-color: #fafafa; overflow: hidden;}
.whois-sub-page-guide .whois-sub-page-guide-navi {padding: 14px 0 14px 0; font-size: 12px; text-align: right; color: #888888;}
.whois-sub-page-guide .whois-sub-page-guide-navi b {color: #333;}

.sub_contents .wrap{display: table; margin: 0 auto; max-width: 1200px; width: 100%; margin-bottom: 100px;}

@media only screen and (min-width:1201px) {
    
	.sub-tab > ul {margin: 0 auto; display: inline-block;}
	.sub-tab li:last-child a {border-right: 1px solid #ddd;}
	.sub-tab .col-5 {width: 1200px;}
}

@media only screen and (max-width:1200px) {
    .sub_contents .wrap{padding: 0 2rem;}
	.sub-tab li:first-child a {border-left: 0;}
	.sub-tab .col-1 li {width: 100%;}
	.sub-tab .col-2 li {width: 50%;}
	.sub-tab .col-3 li {width: 33.33%;}
	.sub-tab .col-4 li {width: 25%;}
}

@media only screen and (max-width:980px) {
	h2.title-divider {font-size: 2rem;}
}

@media only screen and (max-width:768px) {
    .sub_contents .wrap{display: block; padding: 0 2rem;}
    
	.sub-tab {height: 46px;}
	.sub-tab li a {height: 46px; line-height: 46px; font-size: 14px;}
	.whois-sub-page-guide .whois-sub-page-guide-navi {width: 100%; padding: 14px 0 14px 0; float: right;}
	.sub-tab.fixed {position: fixed; top: 0;}
	.sub-tab.fixed ul {margin: 0 auto; width: auto;}
	.sub-tab.fixed a {border-bottom: 0; border-top: 0;}
}


/* Sub Contents (서브 콘텐츠 영역)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#subContents {position: relative; padding: 7rem 0 27vh; width: 100%;}
._common #subContents {padding-top: 15rem;}
#subContents .sub-head-title {margin: 8rem 0 12rem; color: #333; font-weight: 600; font-size: 3.1em; line-height: 1.5; word-break: keep-all;}
.sub1_1 .sub-head-title:after,
.sub1_2 .sub-head-title:after,
.sub1_4 .sub-head-title:after,
.sub4_1 .sub-head-title:after {content: ''; display: block; width: 1px; height: 50px; background: #333; margin: 0 auto; margin-top: 30px;}
#subContents .sub-top-tit {display: block; text-align: center; font-size: 22px; font-weight: 300; color: #333; line-height: 1.4; margin-top: 20px}
.sub-contents p {word-break: break-all;}
.sub-contents p:last-child {margin-bottom: 0;}
.sub-visual {padding-top: 61px; display: flex; align-items: center; width: 100%; height: 350px; background: url('/images/mtl01r-21-0087/sub/subtop_image.png') no-repeat center center/cover;}
.sub-visual div._in {margin: 0 auto; max-width: 1200px; width: 100%; text-align: center;}
.sub-visual h1 {font-weight: 600; font-size: 3.5em; color: #fff;}
.page-nav {position: absolute; top: 11rem; left: 0; right: 0; width: 100%; margin: 0 auto; text-align: right; display:flex; justify-content: right;}
.page-nav div._in {margin: 0 auto; max-width: 1200px; width: 100%;}
.page-nav ul {float: right;}
.page-nav ul li {float: left; position: relative; margin-left: 2.8em; color: #222; font-weight: 500; font-size: .875em;}
.page-nav ul li:before {opacity: .8; content: ''; position: absolute; top: 4px; left: -21px; width: 5px; height: 8px; background: url("/images/mtl01r-21-0087/sub/ico_sub_nav_arrow.png") no-repeat;}
.page-nav ul li:first-child {margin-left: 0;}
.page-nav ul li:first-child:before {display: none;}
.sub-title {display: table; margin: 0 auto; max-width: 1200px; width: 100%;}
.sub-title > div {}
.sub-title > div > h1 {margin-bottom: 5rem; font-weight: 600; font-size: 3em; color: #333; letter-spacing: -1px;}
.sub-title > div > strong {display: block; margin-bottom: 12rem; font-size: 3.1em; line-height: 1.6;}
h2.cont-title {margin: 0 auto; max-width: 1200px; font-weight: 600; font-size: 3.75em;}
h2.cont-title small {opacity: .8; display: block; margin-top: 3rem; color: #333; font-size: 2rem; line-height: 1.5;}
.sub-contents .area_inner {width: 1200px; margin: 0 auto}
.reservation-form {margin: 0 auto; max-width: 1200px;}

@media only screen and (max-width:1400px) {
	.page-nav ul {margin-right: 20px;}
}

@media only screen and (max-width:1200px) {
	._common #subContents {padding-top: 10rem;}
	.page-nav {top: 3rem;}
	.sub-contents .area_inner {width: 100%;}
	.sub-visual {padding-top: 45px; height: 240px;}
	.sub-visual h1 {font-size: 2.5em;}
	.sub-title {padding: 0 2rem;}
	.sub-title > div > h1 {padding-top: 0}
}

@media only screen and (max-width:980px) {
	#subContents {padding: 12vh 0;}
	.sub-title > div > h1 {margin-bottom: 5rem; font-size: 3.5em;}
	.sub-title > div > strong {margin-bottom: 8rem; font-size: 2.5em;}
	h2.cont-title {padding: 0 2rem; font-size: 3em;}
	h2.cont-title small {font-size: 1.8rem;}
}

@media only screen and (max-width:768px) {
	#subContents {padding: 4rem 0 10vh;}
	._common #subContents {padding-top: 0;}
	#subContents .sub-head-title {font-size: 20px; margin: 0 auto 30px;}
	/*	#subContainer {padding-top: 80px !important;}*/
	.sub1_1 .sub-head-title:after,
	.sub1_2 .sub-head-title:after,
	.sub1_4 .sub-head-title:after,
	.sub4_1 .sub-head-title:after {height: 30px; margin-top: 15px;}
	#subContents .sub-top-tit {font-size: 16px; margin-top: 10px}
	.sub-visual {height: 160px;}
	.sub-visual h1 {font-size: 1.5em;}
	.sub-title > div > h1 {margin-bottom: 4rem; font-size: 2.5em;}
	.sub-title > div > strong {margin-bottom: 5rem; font-size: 2em;}
	h2.cont-title {font-size: 2em;}
	.sub-title > div > strong {font-size: 1.5em;}
	.sub-title > div > strong br {display: none;}
	.page-nav {opacity: .25;}
	.page-nav ul li {margin-left: 1.2em;}
	.page-nav ul li:before {left: -11px;}
}


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


/* 게시판 관련 CSS
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 일반게시판 List */
.content-wrap {margin: 0 auto; max-width: 1200px;}
.gallery-wrap {margin: 0 auto; max-width: 1200px;}
.whois-board-list {display: inline-block; padding: 0; font-size: 13px;}
.whois-board-list .whois-board-row {width: 100%; margin: 0 0 0 0; padding: 15px 0 15px 0; float: left; border-bottom:1px solid #eee; color: #000000; font-size: 15px;}
.whois-board-list .whois-board-row:first-child {border-top: 1px solid #ffc90f;}
    
/* Line 색상 */
.whois-board-list .whois-board-row .whois-board-row-subject {margin: 0 0 5px 0; padding: 0; font-size: 16px; font-weight: 600;}
.whois-board-list .whois-board-row .whois-board-row-info {color: #acacac;}
.whois-board-list .whois-board-row .whois-board-row-info .whois-board-row-author {max-width: 33vw; display:inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
/* 일반게시판 view */
.whois-board-view {display: inline-block; border-top: 1px solid #ffc90f;}
    
/* Line 색상 */
.whois-board-view .whois-board-view-row {width: 100%; margin: 0; padding: 0; padding: 10px 0 10px 0; float: left; border-bottom: 1px solid #eee;}
.whois-board-view .whois-board-view-row .whois-board-view-subject {width: 100%; margin: 0 0 15px 0; padding: 0; float:left; font-size: 18px; font-weight: 600;}
.whois-board-view .whois-board-view-row .whois-board-view-author {width: 100%; margin: 0 0 5px 0; padding: 0; float:left; font-size: 13px; font-weight: 600;}
.whois-board-view .whois-board-view-row .whois-board-view-info {width: 100%; margin: 0; padding: 0 0 10px 0; float:left; color: #acacac;}
.whois-board-view .whois-board-view-row .whois-board-view-content {width: 100%; margin: 0; padding: 10px 0 10px 0; float: left; font-size: 16px; line-height: 26px;}
.whois-board-list .whois-board-row.view .whois-board-row-content {font-size: 16px; line-height: 26px;}
.whois-board-view .whois-board-view-files {width: 100%; margin: 0; padding: 0; float: left;}
.whois-board-view .whois-board-view-files .whois-board-view-file {width: 100%; margin: 0; padding: 5px 0; float: left; font-size: 12px;}
.whois-board-view .whois-board-view-files .whois-board-view-file .whois-board-view-file-count {font-size: 11px; color:#c4c4c4;}
/* 게시판 버튼 */
.btn-search,
.whois-button-submit,
.btn-sub {color: #fff; background-color: #ffc90f; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out;}
.btn-search:hover,
.btn-search:focus,
.whois-button-submit:hover,
.whois-button-submit:focus,
.btn-sub:hover,
.btn-sub:focus {color: #fff; background-color: #ffc90f;}
.btn_file {color: #fff !important;}

/* 게시판 공통 */
.sub-box {margin-right: 5px; background-color: #ffc90f; border: 0; color: #ffffff; display: inline-block;}
.sub-box.sm {font-size: 12px; padding: 2px 5px;}
.sub-box.m {font-size: 14px; padding: 4px 8px;}
.sub-box.lg {font-size: 16px; padding: 6px 12px;}
.sub-border {border: 1px solid #ffc90f;}
.sub-border-t {border-top: 1px solid #ffc90f;}
.sub-border-r {border-right: 1px solid #ffc90f;}
.sub-border-b {border-bottom: 1px solid #ffc90f;}
.sub-border-l {border-left: 1px solid #ffc90f;}
.sub-bg {background-color: #ffc90f;}
.sub-bg-hover:hover {background-color: #e64600;}
.sub-content {width: 1200px; margin: 0 auto;}
.paginate_regular {margin-top: 30px;}
label {font-weight: 500; color: #555 }

@media only screen and (max-width: 1200px) {
    .sub-content {padding: 0 2rem !important; width: 100%;} 
    .gallery-wrap {padding: 0 2rem;} 
    .content-wrap {padding: 0 2rem;}
}

/* 로그인/회원가입 관련 CSS
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.material-form {margin: 0 auto; background: #fff;}
.material-form .header {padding: 50px 10px; background: #6498fe; font-size: 16px; color: #fff;}
.material-form .header h3 {font-size: 30px;}
.material-form .header p, .material-form .header span {margin-top: 15px; font-size: 16px; color: #fff;}
.material-form .sub-header h4 {font-weight: bold; height: 34px; line-height: 34px; font-size: 16px;}
.material-form .sub-content .form-group:last-child {margin: 0;}
.material-form .input-group {position: relative; border: 0;}
.material-form .input-group .input-group-addon {padding-right: 6px; padding-left: 6px; background: #fff; border: 0;}
.material-form .form-control, input[type='text'].whois, input[type='password'].whois, select.whois {border: 1px solid #ccc; transition: 0.3s all ease;}

/*.material-form .btn:first-child,*/
.material-form .input-group .form-control:first-child,
.material-form .input-group .form-control.first,
.material-form .input-group .th + .form-control,
.th + input[type='text'].whois,
.th + input[type='password'].whois,
.th + select.whois {border-bottom-left-radius: 4px; border-top-left-radius: 4px;}

/*.material-form .btn:last-child,*/
.material-form .input-group .form-control:last-child,
.material-form .input-group .form-control.last,
.material-form .input-group .input-group-btn:last-child,
.material-form .input-group .input-group-btn:last-child button,
.material-form .input-group .input-group-btn:last-child .btn {border-bottom-right-radius: 4px; border-top-right-radius:
4px;}
.material-form .form-group {margin-bottom: 15px; overflow: visible;}
.material-form .form-group.success .form-control {color: #5cb85c;}
.material-form .form-group.failed .form-control {color: #d9534f;}
.material-form .form-control[readonly] {background: #fff;}
.material-form .btn {height: 38px;}
    
.material-form .btn-default {
-webkit-transition: all .3s ease-out; 
-moz-transition: all .3s ease-out; 
transition: all .3s ease-out; 
}
    
.material-form .input-group input,
.material-form .input-group select,
input[type='text'].whois,
input[type='password'].whois,
select.whois {z-index: 10;}
    
.input-group label.th {z-index: 9; display: none; position: absolute; top: 50%; left: 10px; margin-top: -10px; height:20px; color: #ccc;}
.input-group label.th.ie9 {z-index: 11; display: block;}
.material-form .desc {padding: 10px 0;}
    
.chkbox {display: inline-block; margin: 0; padding: 0;}
.chk-block,
.chk-block span {display: block; text-align: center; width: 100%;}
.chkbox input[type='radio'],
.chkbox input[type='checkbox'] {display: none;}
.chkbox input[type='radio'] ~ .rbtn {padding: 6px 12px; line-height: 27px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer;}
.chkbox input[type='radio']:checked ~ .rbtn {background: #ccc; color: #fff;}
.chkbox input[type='radio'] ~ .box,
.chkbox input[type='checkbox'] ~ .box {display: block; color: #bbb; cursor: pointer; transition: 0.5s all ease;}

.chkbox input[type='radio'] ~ .box:before,
.chkbox input[type='checkbox'] ~ .box:before {display: inline-block; margin-right: 5px; padding: 2px; font-size: 18px; font-weight: normal; line-height: 1; text-align: center; transition: 0.4s all ease; vertical-align: middle; color:#cfcfcf; font-family: 'Glyphicons Halflings' }

.chkbox input[type='radio'] ~ .box:before {content: "e165"; }
.chkbox input[type='checkbox'] ~ .box:before {content: "e013";}
.chkbox input[type='radio']:checked ~ .box,
.chkbox input[type='checkbox']:checked ~ .box {color: #666;}
.chkbox input[type='radio']:checked ~ .box:before,
.chkbox input[type='checkbox']:checked ~ .box:before {color: #666;}


/* sub contents
---------------------------------------------------------------------------------------------------------------------------------------------------------- */

/*  회사개요  */
.sub-contents.sub1_1 .area01 {width: 1200px; margin: 0 auto; margin-bottom: 80px; display: table; text-align: center;}
.sub-contents.sub1_1 .area01 > ul {display: inline-block; position: relative;}
.sub-contents.sub1_1 .area01 > ul:before {content: ''; display: inline-block; width: 100%; height: 1px; background:#ddd; position: absolute; left: 0; top: 50%; z-index: -1;}
.sub-contents.sub1_1 .area01 > ul:after {content: ''; display: block; clear: both;}
.sub-contents.sub1_1 .area01 > ul > li {float: left; display: table; width: 260px; height: 260px; border-radius: 50%; background: #5f5f5f; text-align: center; margin-top: 35px; position: relative;}
.sub-contents.sub1_1 .area01 > ul > li p {display: table-cell; vertical-align: middle; color: #fff; font-size: 22px; line-height: 30px;}
.sub-contents.sub1_1 .area01 > ul > li:first-child:after {content: ''; display: inline-block; width: 14px; height:14px; border-radius: 50%; border: 3px solid #ffc90f; position: absolute; top: 48%; right: -7px; background: #fff;}
.sub-contents.sub1_1 .area01 > ul > li:nth-child(2) {width: 330px; height: 330px; background: #ffc90f; margin: 0px 120px;}
.sub-contents.sub1_1 .area01 > ul > li:last-child:after {content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #ffc90f; position: absolute; top: 48%; left: -7px; background: #fff;}
.sub-contents.sub1_1 .area01 .info_txt {font-size: 20px; line-height: 30px;}
.sub-contents.sub1_1 .area01 .info_txt:before {content: ''; display: block; background: #ffc90f; margin: 30px 0px;}
.sub-contents.sub1_1 .area02 {width: calc(100% + 40px); padding: 80px 0px; background: #f5f5f5; position: relative; left: -20px;}
.sub-contents.sub1_1 .area02 .area_inner {display: table; width: 1200px; height: 300px; margin: 0 auto;}
.area_inner .ssub_title {text-align: center; font-size: 36px; color: #ffc90f; margin-bottom: 50px;}
.area_inner .ssub_title:after {content: ''; display: block; width: 30px; height: 1px; background: #ffc90f; margin: 0 auto; margin-top: 20px;}
.sub-contents.sub1_1 .area02 .area_inner:after {content: ''; display: block; clear: both;}
.sub-contents.sub1_1 .area02 .area_inner .left_area {display: inline-block; float: left; width: 540px; padding: 40px 20px; background: #fff; text-align: center;}
.sub-contents.sub1_1 .area02 .area_inner .left_area h4 {font-size: 22px; line-height: 35px;}
.sub-contents.sub1_1 .area02 .area_inner .left_area h4:before {content: ''; display: block; width: 27px; height: 19px; background: url('/images/mtl01r-21-0040/sub/greeting_icon01.png') no-repeat center center; margin: 0 auto; margin-bottom: 35px;}
.sub-contents.sub1_1 .area02 .area_inner .left_area p {font-size: 16px; line-height: 24px;}
.sub-contents.sub1_1 .area02 .area_inner .left_area p:after {content: ''; display: block; width: 27px; height: 19px; background: url('/images/mtl01r-21-0040/sub/greeting_icon02.png') no-repeat center center; margin: 0 auto; margin-top:35px;}
.sub-contents.sub1_1 .area02 .area_inner .right_area {display: inline-block; float: right;}
.sub-contents.sub1_1 .area03 .area_inner {width: 1200px; margin: 0 auto; margin-top: 80px;}
.sub-contents.sub1_1 .area03 .area_inner:after {content: ''; display: block; clear: both;}
.sub-contents.sub1_1 .area03 .left_area {display: inline-block; float: left;}
.sub-contents.sub1_1 .area03 .right_area {display: inline-block; float: right; width: 600px;}
.sub-contents.sub1_1 .area03 .right_area .right_txt {display: table; height: 320px;}
.sub-contents.sub1_1 .area03 .right_area .right_txt .right_txt_inner {display: table-cell; vertical-align: middle;}
.sub-contents.sub1_1 .area03 .right_area .right_txt .right_txt_inner p:first-child {font-size: 18px; margin-bottom: 45px;}
.sub-contents.sub1_1 .area03 .right_area .right_txt .right_txt_inner p:first-child > span {font-size: 25px; color: #ffc90f; font-weight: bold;}
.sub-contents.sub1_1 .area03 .right_area .right_txt .right_txt_inner p:last-child {line-height: 24px;}

@media only screen and (max-width:1200px) {
    .sub-contents.sub1_1 .area01 {width: 100%; height: auto; margin-bottom: 60px;}
    .sub-contents.sub1_1 .area01 > ul > li {width: 200px; height: 200px;}
    .sub-contents.sub1_1 .area01 > ul > li:nth-child(2) {width: 280px; height: 280px; margin: 0px 60px;}
    .sub-contents.sub1_1 .area01 > ul > li p {font-size: 18px; line-height: 26px;}
    .sub-contents.sub1_1 .area01 > ul > li p > img {width: 80%;}
    .sub-contents.sub1_1 .area01 .info_txt {font-size: 18px; line-height: 26px;}
    .sub-contents.sub1_1 .area02 {padding: 60px 20px;}
    .sub-contents.sub1_1 .area02 .area_inner {width: 100%;}
    .sub-contents.sub1_1 .area02 .area_inner .left_area {width: 100%; display: block; float: none;}
    .sub-contents.sub1_1 .area02 .area_inner .right_area {display: block; float: none; text-align: center; margin-top:30px;}
    .sub-contents.sub1_1 .area03 .area_inner {width: 100%; margin-top: 60px;}
    .sub-contents.sub1_1 .area03 .left_area {display: block; float: none; text-align: center;}
    .sub-contents.sub1_1 .area03 .right_area {display: block; float: none; width: 100%; margin-top: 30px;}
    .sub-contents.sub1_1 .area03 .right_area .right_txt {display: block; height: auto;}
    .sub-contents.sub1_1 .area03 .right_area .right_txt .right_txt_inner {display: block; text-align: center;}
}

@media only screen and (max-width:980px) {
    .area_inner .ssub_title {font-size: 25px; margin-bottom: 30px;}
    .sub-contents.sub1_1 .area01 > ul > li {width: 180px; height: 180px; margin-top: 20px;}
    .sub-contents.sub1_1 .area01 > ul > li:nth-child(2) {width: 220px; height: 220px; margin: 0px 50px;}
    .sub-contents.sub1_1 .area01 > ul > li p {font-size: 16px; line-height: 24px;}
    .sub-contents.sub1_1 .area03 .right_area .right_txt .right_txt_inner p:first-child > span {font-size: 22px;}
}

@media only screen and (max-width:768px) {
    .sub-contents.sub1_1 .area01 > ul > li {float: none; margin-top: 0px; margin-left: 20px;}
    .sub-contents.sub1_1 .area01 > ul > li:nth-child(2) {margin: 50px 0px;}
    .sub-contents.sub1_1 .area01 > ul > li:first-child:after {right: 46%; top: auto; bottom: -7px;}
    .sub-contents.sub1_1 .area01 > ul > li:last-child:after {top: -7px; left: 46%;}
    .sub-contents.sub1_1 .area01 > ul:before {width: 1px; height: 100%; left: 50%; top: 0;}
    .sub-contents.sub1_1 .area02 .area_inner .left_area h4 {font-size: 18px; line-height: 30px;}
}

@media only screen and (max-width:480px) {
    .sub-contents.sub1_1 .area01 .info_txt {font-size: 16px; line-height: 24px;}
}

/*  연혁  */
.sub-contents.sub1_2 {text-align: center;}
.sub-contents.sub1_2 .company_history {position: relative; display: table; width: 230px; height: 230px; margin: 0 auto; background: #ffc90f; border-radius: 50%; font-size: 33px; color: #fff; text-align: center;}
.sub-contents.sub1_2 .company_history:after {content: ''; display: block; width: 250px; height: 250px; border: 1px solid #ccc; border-radius: 50%; position: absolute; left: -10px; top: -10px;}
.sub-contents.sub1_2 .company_history > div {display: table-cell; vertical-align: middle;}
.sub-contents.sub1_2 .company_history > div span {display: block; margin-top: 15px; font-size: 25px;}
.history_wrap {position: relative; padding-top: 80px; padding-bottom: 50px;}
.history_wrap:before {content: ''; display: block; width: 1px; height: 100%; background: #ccc; position: absolute; left: 50%; top: 10px;}
.history_wrap > li {display: block; position: relative;}
.history_wrap > li:before {content: ''; display: inline-block; width: 120px; height: 1px; background: #ffc90f; position: absolute;}
.history_wrap > li:after {content: ''; display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 3px solid #ffc90f; position: absolute;}
.history_wrap > li:nth-child(odd) {margin-left: 50%; padding-left: 155px; text-align: left;}
.history_wrap > li:nth-child(odd):before {left: 0; top: 22px;}
.history_wrap > li:nth-child(odd):after {left: -6px; top: 16px; background: #fff;}
.history_wrap > li:nth-child(even) {margin-right: 50%; padding-right: 155px; text-align: right;}
.history_wrap > li:nth-child(even):before {right: 0; top: 22px;}
.history_wrap > li:nth-child(even):after {right: -7px; top: 16px; background: #fff;}
.history_wrap > li h3 {font-size: 48px; font-weight: bold; font-style: italic; line-height: 1; margin-bottom: 25px; color: #1e1e1e;}
.year_txt > li {margin-bottom: 10px; position: relative; padding-left: 15px; display: inline-block; font-weight: 300; line-height: 24px;}
.year_txt > li:last-child {margin-bottom: 20px;}
.year_txt > li:before {content: ''; display: inline-block; width: 6px; height: 1px; background: #333; position: absolute; left: 0; top: 10px;}
.history_wrap > li:nth-child(even) .year_txt > li:before {position: relative; top: -5px; margin-right: 10px;}

@media only screen and (max-width:980px) {
    .sub-contents.sub1_2 .company_history {width: 200px; height: 200px;}
    .sub-contents.sub1_2 .company_history:after {width: 220px; height: 220px;}
    .sub-contents.sub1_2 .company_history {margin: initial;}
    .history_wrap:before {left: 100px;}
    .history_wrap {padding-bottom: 10px;}
    .history_wrap > li:nth-child(odd) {margin-left: 100px; padding-left: 80px;}
    .history_wrap > li:nth-child(odd):before {width: 60px;}
    .history_wrap > li h3 {font-size: 40px;}
    .history_wrap > li:nth-child(even) {margin-right: 0; padding-right: 0px; text-align: left; margin-left: 100px; padding-left: 80px; margin-top: 50px; margin-bottom: 50px;}
    .history_wrap > li:nth-child(even):before {width: 60px; right: 0; left: 0;}
    .history_wrap > li:nth-child(even):after {right: 0; left: -7px;}
    .year_txt > li {display: block;}
    .history_wrap > li:nth-child(even) .year_txt > li:before {position: absolute; left: 0; top: 9px; margin-right: 0px;}
}

@media only screen and (max-width:480px) {
    .sub-contents.sub1_2 .company_history {width: 160px; height: 160px; margin: 0 auto; font-size: 25px;}
    .sub-contents.sub1_2 .company_history:after {width: 180px; height: 180px;}
    .sub-contents.sub1_2 .company_history > div span {font-size: 20px;}
    .history_wrap > li h3 {font-size: 36px;}
    .history_wrap:before {display: none;}
    .history_wrap > li:nth-child(odd) {margin-left: 0px; padding-left: 0px; padding-bottom: 30px; border-bottom: 1px solid #ddd;}
    .history_wrap > li:nth-child(odd):before {display: none;}
    .history_wrap > li:nth-child(odd):after {display: none;}
    .history_wrap > li:nth-child(even) {margin-left: 0px; margin-top: 30px; margin-bottom: 30px; padding-left: 0px;}
    .history_wrap > li:nth-child(even):before {display: none;}
    .history_wrap > li:nth-child(even):after {display: none;}
}