@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


*{font-family: 'Noto Sans KR', sans-serif; font-weight: 400; color: #0f0f0f; font-size: 15px; line-height: 1.7; letter-spacing: -1px;}

.blind{position:absolute;left: -9999em}
.clearfix{*zoom:1;}
.clearfix:after{display:block;clear:both;content: '';}
body{margin: 0;padding: 0}
h1,h2,h3{letter-spacing: 2px;}
h3{font-weight: 400;text-align: center;line-height: 80px;}
.col-md-6{padding: 0}

#wrap {overflow-x: hidden;}

/*조직도 클릭시 검은배경*/
.bg {position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; background-color: rgba(0,0,0,0.5); z-index: 999}

/*화면하단 아래방향 버튼*/
.scr_down {position: absolute; left: 50%; bottom: 20px; width: 60px; height: 50px; margin: 0 0 0 -30px; padding: 0; background-color: rgba(0,0,0,0); border-color: transparent; text-indent: -9999px;}
.scr_down span {position: absolute; top: 25px; display: block; width: 35px; height: 2px; background-color: #fff;}
.scr_down span:nth-child(1) {left: -1px; transform: rotate(45deg);}
.scr_down span:nth-child(2) {left: 23px; transform: rotate(-45deg);}

#header {position: fixed; top: 0px; left: 0px; right: 0px; width: 100%; height: 80px; background-color: rgba(0,0,0,0.6); z-index: 99;}
#header h1 {position: absolute; top: 20px; left: 17%; width: 150px; height: 39px;}
#header nav {position: absolute; top: 30px; left: 30%; width: 990px; height: 50px;}
#header ul.gnb>li {float: left;}
#header ul.gnb>li>a {margin: 30px; padding: 20px; color: #fff; font-weight: 300; letter-spacing: 1px;}
#header ul.gnb>li>a:hover {color: #e5ad36; transition: .3s;}
#header .menu {position: absolute; display: none; top: 25px; right: 15px; background-color: transparent; border: none;}
#header .menu i {font-size: 35px; color: #fff;}
#header .sub_nav {position: fixed; display: none; top:0; right: 0; bottom: 0; left: 0; background-color: #000; z-index: 99999999999;}
#header .sub_nav ol {height: 30px; margin-top: 20px;}
#header .sub_nav ol>li {float: left; margin-left: 20px;}
#header .sub_nav ol>li>a {display: block; width: 50px; height: 50px; padding: 10px 10px; background-size: cover; text-indent: -9999em; border-radius: 20%;}
#header .sub_nav>ol>li:nth-child(1)>a {background-image: url(../image/short_1.jpg);}
#header .sub_nav>ol>li:nth-child(2)>a {background-image: url(../image/short_2.jpg);}
#header .sub_nav>ol>li:nth-child(3)>a {background-image: url(../image/short_3.jpg);}
#header .sub_nav>ol>li:nth-child(4)>a {background-image: url(../image/short_4.jpg);}
#header .sub_nav>ol>li:nth-child(5)>a {background-image: url(../image/short_5.jpg);}
#header .sub_nav ul {position: absolute; top: 50%; left: 30px; margin-top: -255px;}
#header .sub_nav ul a {display: block; color: #fff; font-size: 60px; font-weight: 600;}
#header .sub_nav ul a:hover {color: #e5ad36; transition: .3s;}
#header .sub_nav button {position: absolute; top: 20px; right: 20px; width: 40px;height: 40px; background-color: transparent; border: none; text-indent: -99999em;}
#header .sub_nav button>span {position: inherit; top: 19px; left:-3px; display: block; width: 45px; height: 2px; background-color: #fff;}
#header .sub_nav button>span:nth-child(1) {transform: rotate(45deg);}
#header .sub_nav button>span:nth-child(2) {transform: rotate(-45deg);}
#header .short_cut {position: fixed; top: 150px; right: 0px;}
#header .short_cut>ol>li>a {display: block; width: 65px; height: 60px; margin-top: 10px; text-indent: -999em; background-size: contain; background-position: 3px 0; border-radius: 10px 0 0 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
#header .short_cut>ol>li:nth-child(1)>a {background-image: url(../image/short_1.jpg);}
#header .short_cut>ol>li:nth-child(2)>a {background-image: url(../image/short_2.jpg);}
#header .short_cut>ol>li:nth-child(3)>a {background-image: url(../image/short_3.jpg);}
#header .short_cut>ol>li:nth-child(4)>a {background-image: url(../image/short_4.jpg);}
#header .short_cut>ol>li:nth-child(5)>a {background-image: url(../image/short_5.jpg);}

#container section {width: 100%; height: 100vh; background-size: cover; background-position: 50% 90%; background-repeat: no-repeat;}
#container #home {position: relative; background-image: url(../image/main.jpg); background-color: #000;}
#container #home .container>div {position: absolute; top: 50%; margin-top: -148px; height: inherit;}
#container #home h2 {font-size: 90px; color: #fff; font-weight: 700; letter-spacing: -0.01em;}
#container #home h3 {text-align: left; font-size: 30px; color: #fff; font-weight: 400;}
#container #home h3>span {font-size: 30px; color: #fff; text-align: left;}
#container #home h3>span:nth-child(1) {color: #79e3cc;}
#container #home h3>span:nth-child(2) {color: #e5a136;}

#container #introduction {position: relative; height: 100vh; background-color: #000; padding-top: 150px;}
#container #introduction h3 {margin-top: 35px; color: #fff; font-weight: 900;}
#container #introduction p {float: left; margin-top: 50px; margin-bottom: 100px; color: #fff;}
#container #introduction p:nth-child(2) {display: block; padding-left: 10%; font-size: 52px; font-weight: 900; text-align: center; letter-spacing: 2px; line-height: 1.2em;}
#container #introduction p:nth-child(3) {display: block;margin-top: 85px; margin-left: 50px; font-size: 18px; font-weight: 100;}
#container #introduction ul {width: 60%; height: 160px; margin: 50px 20% 0 20%; padding: 0}
#container #introduction ul>li {float: left; width: 33.3%; text-align: center;}
#container #introduction ul>li>span {display: block; margin-top: 15px; color: #fff; font-size: 18px;}
#container #introduction .scr_down {}

#container #mission {position: relative; height: 100vh; padding-top: 130px; background-image: url(../image/mission_bg.jpg); background-size: cover;}
#container #mission h3 {margin-top: 50px; padding-left: 100px; font-size: 52px; font-weight: 700; text-align: left; letter-spacing: -0.15em;}
#container #mission .col-md-5>img {width: 100%; margin-top: 47px;}
#container #mission h4 {display: inline-block; width: 200px; margin-top: 10px; margin-left: 33px; font-size: 26px; color font-weight: 500;}
#container #mission h4>strong {display: inline-block; width: 40px; margin-right: 4px; font-size: 42px; color: #fff; text-align: center}
#container #mission ol {margin-top: 30px;}
#container #mission ol>li>p {display: inline-block; width: 55%; padding-top: 20px; font-size: 16x; line-height: 1.6em;}
#container #mission .container>.org_btn {position: absolute; top: 190px; left: 50%; width: 200px; height: 48px; margin-left: 163px; color: #fff; background-color: #000; border: none; border-radius: 10px;}
#container #mission .container>.org_btn>span {color: #fff;}
#container #mission .org_chart {position: fixed; top: 50%; left: 50%; display: none; width: 950px; height: 650px; margin-top: -325px; margin-left: -450px; text-align: center; background-color: #fff; border-radius: 20px; z-index: 9999;}
#container #mission .org_chart>img {margin-top: 32.5px; width: 90%;}
#container #mission .org_chart>button {position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; font-size: 40px; background-color: #000; font-weight: 500; border: none; border-radius: 50%; text-indent: -9999em;}
#container #mission .org_chart>button>span {position: absolute; top: 19px; left: 4px; display: block; width: 32px; height: 2px; background-color: #fff;}
#container #mission .org_chart>button>span:nth-child(1) {transform: rotate(45deg);}
#container #mission .org_chart>button>span:nth-child(2) {transform: rotate(-45deg);}
#container #mission .org_s {display: none;}
#container #mission .scr_down span:nth-child(2) {background-color: #000;}

#container #core_value {position: relative; height: 100vh; padding-top: 150px; background-image: url(../image/core_value.jpg); background-size: 98%; background-position: center; text-indent: -999em;}
#container #core_value span {display: block; text-indent: -9999em;}
#container #core_value .scr_down span {background-color: #000;}

#container #ci {position: relative; height: 100vh; padding-top: 110px; background-image: url(../image/ci_bg2.jpg); background-size: 1920px; background-position: center bottom;}
#container #ci h3 {text-indent: -999em;}
#container #ci h4 {position: relative; float: left; font-size: 40px; margin-bottom: 80px;}
#container #ci h4.left {text-align: right; padding-right: 2px; color: #000;}
#container #ci h4.left:before {content: ''; position: absolute; top: -20px; left: 280px; width: 50px; height: 50px; background-color: transparent; border: 6px solid #000; border-color: black transparent transparent black}
#container #ci h4.right {text-align: left; padding-left: 2px; color: #fff;}
#container #ci h4.right:after {content: ''; position: absolute; bottom: -20px; right: 260px; width: 50px; height: 50px; background-color: transparent; border: 6px solid #000; border-color: transparent white white transparent}
#container .ci_explain {margin-left: 50%; padding-left: 86px;}
#container .ci_explain>dl {position: relative;}
#container .ci_explain>dl>dd+strong {color: #fff;}
#container .ci_explain>dl>dt {margin-top: 22px; padding-left: 26px; font-size: 20px;}
#container .ci_explain>dl>dt:before {content: ''; position: absolute; top:03.5px; left: 0px; width: 22px; height: 22px; background-image: url(../image/ci_nb.png);}
#container .ci_explain>dl:nth-child(1)>dt {color: #e5a137;}
#container .ci_explain>dl:nth-child(2)>dt {color: #79e3cc;}
#container .ci_explain>dl:nth-child(3)>dt {color: #e5a137;}
#container .ci_explain>dl:nth-child(4)>dt {color: #79e3cc;}
#container .ci_explain>dl:nth-child(5)>dt {color: #e5a137;}
#container .ci_explain>dl:nth-child(1)>dt:before {top: 209.5px;}
#container .ci_explain>dl:nth-child(2)>dt:before {background-position: 88px;}
#container .ci_explain>dl:nth-child(3)>dt:before {background-position: 66px;}
#container .ci_explain>dl:nth-child(4)>dt:before {background-position: 44px;}
#container .ci_explain>dl:nth-child(5)>dt:before {background-position: 22px;}
#container .ci_explain>dl>dd {width: 81%; margin-top: 5px; padding: 0 2px 2px 2px; color: #fff; border-bottom: 1px solid #fff}
#container .ci_explain>dl>dd>strong {color: #fff;}
#container #ci .scr_down span:nth-child(1) {background-color: #000;}

#container #brand {position: relative; height: 100vh; padding-top: 130px; background-color: #000;}
#container #brand h3 {color: #fff; font-size: 40px; font-weight: 700;}
#container #brand .cat {width: 100%; margin-top: 50px; padding-left:0;}
#container #brand .cat>li {position: relative; float: left; height: 310px; margin: 0.4%; background-size: cover; background-position: center; background-repeat: no-repeat;}
#container #brand .cat>li:nth-child(1) {width: 24.2%; background-image: url(../image/brand_1.jpg); background-position: -1px}
#container #brand .cat>li:nth-child(2) {width: 24.2%; background-image: url(../image/brand_2.jpg);}
#container #brand .cat>li:nth-child(3) {width: 24.2%; background-image: url(../image/brand_3.jpg);}
#container #brand .cat>li:nth-child(4) {width: 24.2%; background-image: url(../image/brand_4.jpg);}
#container #brand .cat>li:nth-child(5) {width: 32.53%; height: 250px; background-image: url(../image/brand_5.jpg); background-size: 110%; background-position: bottom right;}
#container #brand .cat>li:nth-child(6) {width: 32.53%; height: 250px; background-image: url(../image/brand_6.jpg);}
#container #brand .cat>li:nth-child(7) {width: 32.53%; height: 250px; background-image: url(../image/brand_7.jpg);}
#container #brand .cat>li:nth-child(5) span {display: block; line-height: 250px;}
#container #brand .cat>li:nth-child(6) span {display: block; line-height: 250px;}
#container #brand .cat>li:nth-child(7) span {display: block; line-height: 250px;}
#container #brand .cat>li>.b_bg {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.6); transition: all 0.3s}
#container #brand .cat>li>span {position: relative; display: block; font-size: 22px; color: #fff; text-align: center; line-height: 310px; text-shadow: 2px 2px 5px rgba(0,0,0,0.4); z-index: 2}
#container #brand .cat>li:hover .b_bg {display: none;}
#container #brand .cat>li:hover span {display: none;}

#container #loction {height: calc(100vh - 180px); padding-top: 150px;}
#container #loction h3 {margin-bottom: 50px; color: #000; font-size: 40px; font-weight: 700;}
#container #loction>.container>div {float: left;}
#container #loction>.container>div:nth-child(2) {width: 720px}
#container #loction>.container>div:nth-child(3) {width: 500px;}
#container #loction>.container>div>iframe {width: 100%;}
#container #loction dl {margin-top: 40px;}
#container #loction dl>dt {float: left; width: 100px; height: 70px; margin-left: 20px; font-size: 18px;}
#container #loction dl>dd {height: 70px; font-size: 18px; font-weight: 300; letter-spacing: -0.05em}
#container #loction button {width: 200px; height: 56px; margin-left: 20px; text-align: center; line-height: 1.6em; background-color: #fff; border: 1px solid #dfdfdf;}
#container #loction button i {margin-right: 5px; margin-left: -2.5px; color: #fe3232; font-size: 18px;}
#container #loction button>a:hover {color: #000}

#footer {width: 100%; height: 180px; background-color: #000;}
#footer address {margin-top: 65px; color: #fff; text-align: center; font-weight: 200;}
#footer address>span {font-size: 14px; color: #666;}



@media (min-width: 1513px){
	@media (max-height: 900px){
		#container #introduction {height: 900px; padding-top: 100px;}
		#container #mission {height: 900px; padding-top: 100px;}
		#container #mission .container>.org_btn {top: 160px;}
		#container #core_value {height: 900px; background-position: center;}
		#container #ci {height: 930px; padding-top: 90px;}
		#container #brand {height: 900px;}
		#container #loction {height: 720px;}
	}
	@media (max-height: 490px){
		#container #home .container>div {margin-top: -109px;}
		#container #home h2 {font-size: 70px;}
		#container #home h3,#container #home h3>span {font-size: 24px;}
	}

}


@media (min-width: 1200px) and (max-width: 1512px){
	#header h1 {left: 8%;}
	#header ul.gnb>li>a {margin: 10px;}
	#container #mission {padding-top: 150px;}
	#container #mission h4 {width: 180px; margin-left: 17px;}
	#container #mission ol>li>p {font-size: 14px;}
	#container #mission .container>.org_btn {top: 210px;}
	#container #core_value {background-size: 130%}
	#container #ci {padding-top: 130px; background-position: center 70%}
	#container #ci h4 {margin-bottom: 85px; font-size: 34px;}
	#container #ci h4.left:before {left: 250px; width: 40px; height: 40px; border-width: 5px;}
	#container #ci h4.right:after {right: 230px; width: 40px; height: 40px; border-width: 5px;}
	#container .ci_explain>dl>dd {width: 100%;}
	#container #brand {padding-top: 130px;}
	#container #loction>.container>div:nth-child(2) {width: 60%}
	#container #loction>.container>div:nth-child(3) {width: 40%;}
	#container #loction dl {margin-top: 50px;}
	#container #loction dl>dd {width: 90%}
	@media (max-height: 900px){
		#container #introduction {height: 900px; padding-top: 120px;}
		#container #mission {height: 900px; padding-top: 100px;}
		#container #mission .container>.org_btn {top: 160px;}
		#container #core_value {height: 900px;background-size: 100%; background-position: center;}
		#container #ci {height: 920px; padding-top: 90px;}
		#container #ci h4 {margin-bottom: 60px;}
		#container .ci_explain>dl:nth-child(1)>dt:before {top:167.5px;}
		#container #brand {height: 900px; padding-top: 115px;}
		#container #loction {height: 710px;}
	}
}

@media (min-width: 1400px) and (max-width: 1512px){
	#container #mission h4 {width: 200px;}
	#container #mission h4>strong {width: 56px; text-align: center;}
	#container .ci_explain>dl>dt {margin-top: 21px;}
	#container .ci_explain>dl>dd {width: 80%;}
}


@media (min-width: 992px) and (max-width: 1199px){
	#header h1 {left:5%;}
	#header ul.gnb>li>a {margin:10px; padding: 10px;}
	#container #introduction {padding-top: 120px; text-align: center;}
	#container #introduction p {width: 100vh;}
	#container #introduction p:nth-child(2) {width: 100%; margin-bottom: 0; padding-left: 0}
	#container #introduction p:nth-child(3) {width: 100%; margin-top: 20px; margin-bottom: 50px; margin-left: 0}
	#container #mission {padding-top: 180px; background-image: none;}
	#container #mission h3 {margin-top: 0}
	#container #mission ol {margin-top: 40px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p,p>strong {font-size: 16px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission .container>.org_btn{left: 15%;}
	#container #mission .org_chart {width: 800px; height: 580px; margin-top: -290px; margin-left: -400px;}
	#container #mission .org_chart img {margin-top: 43.5px;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {background-size: 165%; background-position: 50%;}
	#container #ci {position: relative; padding-top: 95px; background-image: none; background-color: #000;}
	#container #ci h4 {margin-bottom:275px; font-size: 30px;}
	#container #ci h4.left {color: #fff;}
	#container #ci h4.left:before {left: 200px; width: 40px; height: 40px; border: 5px solid #000; border-color: white transparent transparent white}
	#container #ci h4.right:after {right: 180px; width: 40px; height: 40px; border-width: 5px;}
	#container #ci .ci_explain {margin: 0;}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 265px; left: 50%; width: 726px; height: 245px; margin-left: -363px; background-image: url(../image/ci.jpg); background-size: cover; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 50%; padding: 0 23px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #79e3cc;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #e5a137;}
	#container .ci_explain>dl>dt {margin-top: 15px; padding-left: 0}
	#container .ci_explain>dl>dt:before {display: none;}
	#container .ci_explain>dl>dd {border-bottom: none;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand .cat>li:nth-child(5) {background-size: cover;}
	#container #loction {position: relative; height: calc(100vh - 60px); padding-top: 150px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%;}
	#container #loction dl {margin-top: 30px;}
	#container #loction dl>dt {height: 50px;}
	#container #loction dl>dd {height: 50px;}
	#container #loction button {position: absolute; right: 21.5px; top: 700px;}
	#footer {height: 60px;}
	#footer address {margin-top: 5px}
	@media (max-height: 1100px){
		#container #introduction {height: 920px;}
		#container #mission {height: 920px;}
		#container #core_value {height: 920px;}
		#container #ci {height: 960px;}
		#container #brand {height: 920px;}
		#container #loction {height: 800px; padding-top: 100px;}
		#container #loction button {top: 670px; right: 31px;}
	}
}



@media (min-width: 768px) and (max-width: 991px){
	#header h1 {left: 30.5px;}
	#header nav {display: none;}
	#header .menu {display: block;}
	#header .short_cut {display: none;}
	#container #introduction {padding-top: 110px;}
	#container #introduction h3 {margin-top: 50px;}
	#container #introduction p {width: 100%;}
	#container #introduction p:nth-child(2) {margin: 20px 0 0 0; padding: 0;}
	#container #introduction p:nth-child(3) {margin: 10px 0 40px 0; text-align: center;}
	#container #introduction ul {width: 100%; margin: 50px 0;}
	#container #mission {padding-top: 160px; background-image: none;}
	#container #mission h3 {margin-top: 0}
	#container #mission ol {margin-top: 40px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p,p>strong {font-size: 16px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission h3 {padding-left: 40px;}
	#container #mission ol {padding: 0;}
	#container #mission .container>.org_btn {left: 20%; top: 170px;}
	#container #mission .org_chart {width: 660px; height: 500px; margin-top: -250px; margin-left: -330px;}
	#container #mission .org_chart img {margin-top: 47px;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {background-size: 170%; background-position: center}
	#container #ci {position: relative; padding-top: 100px; background-image: none; background-color: #000;}
	#container #ci h4 {margin-bottom:280px; font-size: 24px;}
	#container #ci h4.left {color: #fff;}
	#container #ci h4.left:before {left: 130px; width: 30px; height: 30px; border: 5px solid #000; border-color: white transparent transparent white}
	#container #ci h4.right:after {right: 120px; width: 30px; height: 30px; border-width: 5px;}
	#container #ci .ci_explain {margin: 0; padding: 0}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 255px; left: 50%; width: 726px; height: 245px; margin-left: -363px; background-image: url(../image/ci.jpg); background-size: cover; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 50%; padding: 0 13px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #79e3cc;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #e5a137;}
	#container .ci_explain>dl>dt {padding-left: 0}
	#container .ci_explain>dl>dt:before {display: none;}
	#container .ci_explain>dl>dd {width: 100%; border-bottom: none;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand {padding-top: 120px;}
	#container #brand .cat>li:nth-child(1) {background-position: -85px;}
	#container #brand .cat>li:nth-child(5) {background-size: cover;}
	#container #loction {position: relative; height: calc(100vh - 70px); padding-top: 130px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%;}
	#container #loction dl {margin-top: 30px;}
	#container #loction dl>dt {height: 50px;}
	#container #loction dl>dd {height: 50px;}
	#container #loction button {position: absolute; left: 63%; top: 698px;}
	#footer {height: 70px;}
	#footer address {margin-top: 10px}
	@media (max-height: 1100px){
		#container #introduction {height: 920px;}
		#container #mission {height: 920px;}
		#container #core_value {height: 920px;}
		#container #ci {height: 960px;}
		#container #brand {height: 920px;}
		#container #loction {height: 800px; padding-top: 100px;}
		#container #loction button {top: 670px; right: 31px;}
	}
	@media (min-height: 580px) and (max-height: 800px){
		#header .sub_nav ul {margin-top: -204px;}
		#header .sub_nav ul a {font-size: 48px;}
	}
}



@media (min-width: 576px) and (max-width: 767px){
	#header h1 {left: 17px;}
	#header nav {display: none;}
	#header .menu {display: block;}
	#header .short_cut {display: none;}
	#container #home h2 {font-size: 70px;}
	#container #introduction {padding-top: 90px;}
	#container #introduction h3 {margin-top: 50px;}
	#container #introduction p {width: 100%;}
	#container #introduction p:nth-child(2) {margin: 20px 0 0 0; padding: 0;}
	#container #introduction p:nth-child(3) {margin: 10px 0 40px 0; text-align: center;}
	#container #introduction ul {width: 100%; margin: 50px 0;}
	#container #mission {padding-top: 135px; background-image: none;}
	#container #mission h3 {margin-top: 0}
	#container #mission h4 {display: block; margin: 0;}
	#container #mission h4,#container #mission ol>li>p {float: left;}
	#container #mission ol {margin-top: 40px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p {margin-bottom: 0; padding-top: 22px;}
	#container #mission ol>li>p,p>strong {font-size: 16px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission .container>.org_btn{top:145px; left: 120px;}
	#container #mission h3 {padding-left: 40px;}
	#container #mission ol {padding: 0;}
	#container #mission .org_chart {width: 500px; height: 470px; margin-top: -235px; margin-left: -250px;}
	#container #mission .org_chart img {display: none;}
	#container #mission .org_chart .org_s {display: block; width: 90%; margin-left: 5%;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {padding-top: 110px; background-image: none; text-indent: 0}
	#container #core_value h3 {margin-bottom: 30px; font-size: 48px; font-weight: 600;}
	#container #core_value .core_list {position: relative; width: 80%; height: 150px; margin-left: 20%; margin-bottom: 10px;}
	#container #core_value .core_list:before {content: ''; position: absolute; left: calc(-20% + -17px); width: 22%; height: 150px; padding: 0 10px; background-size: contain; background-repeat: no-repeat;}
	#container #core_value .core_list:nth-child(2):before {margin-top: 31.5px; background-image: url(../image/core_icon1.jpg);}
	#container #core_value .core_list:nth-child(3):before {margin-top: 23px; background-image: url(../image/core_icon2.jpg);}
	#container #core_value .core_list:nth-child(4):before {margin-top: 29.5px; margin-left: 16.7px; background-image: url(../image/core_icon3.jpg); background-size: 50px;}
	#container #core_value .core_list:nth-child(5):before {margin-top: 28px; background-image: url(../image/core_icon4.jpg);}
	#container #core_value .core_list:nth-child(2) {background-color: #e5a136}
	#container #core_value .core_list:nth-child(3) {background-color: #e8d698}
	#container #core_value .core_list:nth-child(4) {background-color: #93e3bc}
	#container #core_value .core_list:nth-child(5) {background-color: #81f1d8}
	#container #core_value .core_list>h4 {padding-top: 26px; margin-bottom: 0; padding-left: 20px; font-size: 30px; font-weight: 500;}
	#container #core_value .core_list>span {padding-left: 22px; font-weight: 200; text-indent: 0}
	#container #core_value .core_list>p {margin-top: 5px; margin-bottom: 0; padding-left: 20px; font-size: 16px;}
	#container #ci {position: relative; padding-top: 85px; background-image: none; background-color: #000;}
	#container #ci h4 {margin-bottom:280px; font-size: 22px;}
	#container #ci h4.left {color: #fff;}
	#container #ci h4.left:before {left: 40px; width: 30px; height: 30px; border: 5px solid #000; border-color: white transparent transparent white}
	#container #ci h4.right:after {right: 50px; width: 30px; height: 30px; border-width: 5px;}
	#container #ci .ci_explain {margin: 0; padding: 0}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 220px; left: 50%; width: 550px; height: 245px; margin-left: -275px; background-image: url(../image/ci.jpg); background-size: cover; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 50%; padding: 0 15px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #79e3cc;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #e5a137;}
	#container .ci_explain>dl>dt {margin-top: 10px; padding-left: 0;}
	#container .ci_explain>dl>dt:before {display: none;}
	#container .ci_explain>dl>dd {width: 100%; border-bottom: none;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand {padding-top: 100px;}
	#container #brand .cat {margin-top: 20px;}
	#container #brand .cat>li {margin: 0;}
	#container #brand .cat>li:nth-child(1) {width: 100%; height: 165px; background-position: 50% 85%}
	#container #brand .cat>li:nth-child(2) {width: 50%; height: 165px; background-size: 120%; background-position: right 30%;}
	#container #brand .cat>li:nth-child(3) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(4) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(6) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(7) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(6) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(7) span {line-height: 165px;}
	#container #brand .cat>li>span {line-height: 165px;}
	#container #loction {position: relative; height: calc(100vh - 70px); padding-top: 130px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%;}
	#container #loction dl {margin-top: 30px;}
	#container #loction dl>dt {height: 50px;}
	#container #loction dl>dd {height: 50px;}
	#container #loction button {position: absolute; right: 30.5px; top: 698px;}
	#footer {height: 70px;}
	#footer address {margin-top: 10px}
	@media (max-height: 1100px){
		#container #introduction {height: 920px; padding-top: 50px;}
		#container #mission {height: 920px; padding-top: 100px;}
		#container #mission .container>.org_btn {top: 110px;}
		#container #core_value {height: 920px;}
		#container #ci {height: 960px;}
		#container #brand {height: 920px;}
		#container #loction {height: 800px; padding-top: 100px;}
		#container #loction button {top: 670px; right: 31px;}
	}
}


@media (min-width: 494px) and  (max-width: 575px){
	#header {width: 100%;}
	#header h1 {left: 0; width: 150px; margin: 0; padding-left: 7.5px; padding-right: 0;}
	#header nav {display: none;}
	#header .menu {display: block;}
	#header .sub_nav ol>li {margin-left: 10px;}
	#header .sub_nav ul {padding-top: 50px;}
	#header .sub_nav ul a {font-size: 50px;}
	#header .short_cut {display: none;}
	#container #home {width: 100%;}
	#container #home .container>div {margin-top: -99px;}
	#container #home h2 {margin-left: 5%; font-size: 60px;}
	#container #home h3 {margin-left: 5%; font-size: 26px;}
	#container #home h3 span {font-size: 26px;}
	#container #introduction {padding-top: 100px;}
	#container #introduction h3 {margin-top: 50px;}
	#container #introduction p {width: 100%;}
	#container #introduction p:nth-child(2) {margin: 20px 0 0 0; padding: 0;}
	#container #introduction p:nth-child(3) {margin: 10px 0 20px 0; text-align: center;}
	#container #introduction ul {width: 80%; margin: 20px 10% 0 10%;}
	#container #introduction ul>li {width: 33.3%;}
	#container #introduction ul>li>img {width: 100%;}
	#container #mission {padding-top: 100px; background-image: none;}
	#container #mission h3 {margin-top: 0; padding-left: 0}
	#container #mission h4 {display: block; width: 170px; margin: 0;}
	#container #mission h4>strong {width: initial;}
	#container #mission h4,#container #mission ol>li>p {float: left;}
	#container #mission ol {margin-top: 30px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p {margin-bottom: 0; padding-top: 22px;}
	#container #mission ol>li>p,p>strong {font-size: 15px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission .container>.org_btn{top:110px; left: 0px;}
	#container #mission ol {padding: 0;}
	#container #mission .org_chart {width: 480px; height: 450px; margin-top: -225px; margin-left: -240px;}
	#container #mission .org_chart img {display: none;}
	#container #mission .org_chart .org_s {display: block; width: 90%; margin-top: 27.5px; margin-left: 5%;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {padding-top: 115px; background-image: none; text-indent: 0}
	#container #core_value h3 {margin-bottom: 30px; font-size: 48px; font-weight: 600;}
	#container #core_value .core_list {position: relative; width: 80%; height: 150px; margin-left: 20%; margin-bottom: 10px; padding: 0 20px;}
	#container #core_value .core_list:before {content: ''; position: absolute; left: calc(-20% + -17px); width: 22%; height: 150px; padding: 0 10px; background-size: contain; background-repeat: no-repeat;}
	#container #core_value .core_list:nth-child(2):before {margin-top: 31.5px; background-image: url(../image/core_icon1.jpg);}
	#container #core_value .core_list:nth-child(3):before {margin-top: 23px; background-image: url(../image/core_icon2.jpg);}
	#container #core_value .core_list:nth-child(4):before {margin-top: 29.5px; margin-left: 16.7px; background-image: url(../image/core_icon3.jpg); background-size: 50px;}
	#container #core_value .core_list:nth-child(5):before {margin-top: 28px; background-image: url(../image/core_icon4.jpg);}
	#container #core_value .core_list:nth-child(2) {background-color: #e5a136}
	#container #core_value .core_list:nth-child(3) {background-color: #e8d698}
	#container #core_value .core_list:nth-child(4) {background-color: #93e3bc}
	#container #core_value .core_list:nth-child(5) {background-color: #81f1d8}
	#container #core_value .core_list>h4 {padding-top: 26px; margin-bottom: 0; font-size: 30px; font-weight: 500;}
	#container #core_value .core_list>span {padding-left: 2px; font-weight: 200; text-indent: 0}
	#container #core_value .core_list>p {margin-top: 5px; margin-bottom: 0; font-size: 16px;}
	#container #ci {position: relative; padding-top: 85px; background-image: none; background-color: #000;}
	#container #ci h4 {margin-bottom:280px; font-size: 20px;}
	#container #ci h4.left {margin-left: 1.5%; color: #fff;}
	#container #ci h4.left:before {left: 40px; width: 30px; height: 30px; border: 5px solid #000; border-color: white transparent transparent white}
	#container #ci h4.right:after {right: 50px; width: 30px; height: 30px; border-width: 5px;}
	#container #ci .ci_explain {margin: 0; padding: 0}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 210px; left: 50%; width: 480px; height: 245px; margin-left: -240px; background-image: url(../image/ci.jpg); background-size: cover; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 50%; padding: 0 15px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #e5a137;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #79e3cc;}
	#container .ci_explain>dl>dt:before {top: 13px; left: 15px;}
	#container .ci_explain>dl:nth-child(1)>dt:before {top: 13px;}
	#container .ci_explain>dl>dt {margin-top: 10px;}
	#container .ci_explain>dl>dd {width: 100%; letter-spacing: -1.4px;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand {padding-top: 100px;}
	#container #brand .cat {margin-top: 20px;}
	#container #brand .cat>li {margin: 0;}
	#container #brand .cat>li:nth-child(1) {width: 100%; height: 165px; background-position: 50% 85%}
	#container #brand .cat>li:nth-child(2) {width: 50%; height: 165px; background-size: 120%; background-position: right 30%;}
	#container #brand .cat>li:nth-child(3) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(4) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(6) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(7) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(6) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(7) span {line-height: 165px;}
	#container #brand .cat>li>span {line-height: 165px;}
	#container #loction {position: relative; height: calc(100vh - 70px); padding-top: 130px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%; height: 360px;}
	#container #loction>.container>div:nth-child(3) {width: 100%;}
	#container #loction dl {margin-top: 50px;}
	#container #loction dl>dt {width: 80px; height: 50px;}
	#container #loction dl>dd {height: 50px;}
	#container #loction button {position: absolute; top: 763px; left: 0; width: 95%; margin-left: 2.5%;}
	#footer {height: 70px;}
	#footer address {margin-top: 10px}
	@media (max-height: 850px){
		#container #introduction {height: 820px;}
		#container #mission {height: 870px;}
		#container #core_value {height: 920px;}
		#container #ci {height: 930px;}
		#container #brand {height: 920px;}
		#container #loction {height: 880px; padding-top: 100px;}
	}
}


@media (min-width: 440px) and  (max-width: 493px){
	#header {width: 100%;}
	#header h1 {left: 0; width: 150px; margin: 0; padding-left: 7.5px; padding-right: 0;}
	#header nav {display: none;}
	#header .menu {display: block;}
	#header .sub_nav ol>li {margin-left: 10px;}
	#header .sub_nav ol>li>a {width: 40px;height: 40px;}
	#header .sub_nav ul {padding-top: 30px; padding-left: 0;}
	#header .sub_nav ul a {font-size: 50px;}
	#header .short_cut {display: none;}
	#container #home {width: 100%;}
	#container #home h2 {margin-left: 5%; font-size: 50px;}
	#container #home h3 {margin-left: 5%; font-size: 22px;}
	#container #home h3 span {font-size: 22px;}
	#container #home .container>div {margin-top: -83.5px;}
	#container #introduction {height: 850px; padding-top: 80px;}
	#container #introduction h3 {margin-top: 50px;}
	#container #introduction p {width: 100%;}
	#container #introduction p:nth-child(2) {margin: 20px 0 0 0; padding: 0;}
	#container #introduction p:nth-child(3) {margin: 10px 0 40px 0; text-align: center;}
	#container #introduction ul {width: 80%; margin: 20px 10% 0 10%;}
	#container #introduction ul>li {width: 33.3%;}
	#container #introduction ul>li>img {width: 100%;}
	#container #mission {height: 1080px; padding-top: 90px; background-image: none;}
	#container #mission h3 {margin-top: 0; padding-left: 10px; font-size: 45px;}
	#container #mission h4 {display: block; margin: 0; font-size: 24px;}
	#container #mission h4,#container #mission ol>li>p {float: left;}
	#container #mission h4>strong {width: initial; margin-right: 1px; font-size: 40px;}
	#container #mission ol {margin-top: 40px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p {width: 100%; margin-bottom: 20px; padding-top: 0px;}
	#container #mission ol>li>p,p>strong {font-size: 16px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission .container>.org_btn{top: 96px; left: 0; width: 180px; height: 45px; line-height: 45px;}
	#container #mission ol {margin-top: 20px; padding: 0;}
	#container #mission .org_chart {width: 430px; height: 390px; margin-left: -215px;}
	#container #mission .org_chart img {display: none;}
	#container #mission .org_chart .org_s {display: block; width: 90%; margin-top: 27.5px; margin-left: 5%;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {height: 900px; padding-top: 100px; background-image: none; text-indent: 0}
	#container #core_value h3 {margin-bottom: 30px; font-size: 40px; font-weight: 600;}
	#container #core_value .core_list {position: relative; width: 80%; height: 150px; margin-left: 20%; margin-bottom: 10px; padding: 0 20px;}
	#container #core_value .core_list:before {content: ''; position: absolute; left: calc(-20% + -17px); width: 22%; height: 150px; padding: 0 10px; background-size: contain; background-repeat: no-repeat;}
	#container #core_value .core_list:nth-child(2):before {margin-top: 31.5px; background-image: url(../image/core_icon1.jpg);}
	#container #core_value .core_list:nth-child(3):before {margin-top: 23px; background-image: url(../image/core_icon2.jpg);}
	#container #core_value .core_list:nth-child(4):before {margin-top: 29.5px; margin-left: 16.7px; background-image: url(../image/core_icon3.jpg); background-size: 50px;}
	#container #core_value .core_list:nth-child(5):before {margin-top: 28px; background-image: url(../image/core_icon4.jpg);}
	#container #core_value .core_list:nth-child(2) {background-color: #e5a136}
	#container #core_value .core_list:nth-child(3) {background-color: #e8d698}
	#container #core_value .core_list:nth-child(4) {background-color: #93e3bc}
	#container #core_value .core_list:nth-child(5) {background-color: #81f1d8}
	#container #core_value .core_list>h4 {padding-top: 15px; margin-bottom: 0; font-size: 30px; font-weight: 500;}
	#container #core_value .core_list>span {padding-left: 2px; font-weight: 200; text-indent: 0}
	#container #core_value .core_list>p {margin-top: 5px; margin-bottom: 0; font-size: 16px;}
	#container #ci {position: relative; height: 1000px; padding-top: 85px; background-image: none; background-color: #000;}
	#container #ci h4 {margin-bottom:290px; font-size: 17px;}
	#container #ci h4.left {margin-left: 4%; color: #fff;}
	#container #ci h4.left:before {left: 40px; width: 30px; height: 30px; border: 5px solid #000; border-color: white transparent transparent white}
	#container #ci h4.right:after {right: 50px; width: 30px; height: 30px; border-width: 5px;}
	#container #ci .ci_explain {margin: 0; padding: 0}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 210px; left: 50%; width: 480px; height: 245px; margin-left: -240px; background-image: url(../image/ci.jpg); background-size: cover; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 50%; padding: 0 15px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #79e3cc;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #e5a137;}
	#container .ci_explain>dl>dt {margin-top: 13px;}
	#container .ci_explain>dl>dd {width: 100%; font-size: 14px;}
	#container .ci_explain>dl>dd>strong {font-size: 14px;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand {height: 900px;padding-top: 80px;}
	#container #brand .cat {margin-top: 20px;}
	#container #brand .cat>li {margin: 0;}
	#container #brand .cat>li:nth-child(1) {width: 100%; height: 165px; background-position: 50% 85%}
	#container #brand .cat>li:nth-child(2) {width: 50%; height: 165px; background-size: 120%; background-position: right 30%;}
	#container #brand .cat>li:nth-child(3) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(4) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) {width: 50%; height: 165px; background-size: cover; line-height: 150px;}
	#container #brand .cat>li:nth-child(6) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(7) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(6) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(7) span {line-height: 165px;}
	#container #brand .cat>li>span {line-height: 165px;}
	#container #loction {position: relative; height: 750px; padding-top: 100px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%; height: 280px;}
	#container #loction>.container>div:nth-child(2)>iframe {height: 100%;}
	#container #loction>.container>div:nth-child(3) {width: 100%;}
	#container #loction dl {margin-top: 20px; margin-bottom: 0}
	#container #loction dl>dt {width: 60px; height: 50px; font-size: 15px;}
	#container #loction dl>dd {height: 50px; font-size: 15px;}
	#container #loction button {width: 95%; margin-left: 2.5%;}
	#footer {height: 70px;}
	#footer address {margin-top: 10px; font-size: 14px;}
	#footer address>span {font-size: 12px;}
}



@media (min-width: 360px) and  (max-width: 439px){
	#header {width: 100%; height: 72px;}
	#header h1 {left: 0; width: 110px; margin: 0; padding-left: 10px; padding-right: 0;}
	#header h1 a img {width: 100%}
	#header nav {display: none;}
	#header .menu {display: block;}
	#header .menu i {font-size: 25px;}
	#header .sub_nav ol>li {margin-left: 10px;}
	#header .sub_nav ol>li>a {width: 40px;height: 40px;}
	#header .sub_nav ul {margin-bottom: 0; padding-top: 60px; padding-left: 0;}
	#header .sub_nav ul a {font-size: 48px;}
	#header .sub_nav ul a:hover {color: #e5ad36; transition: 0s}
	#header .short_cut {display: none;}
	#container #home {width: 100%;}
	#container #home h2 {margin-left: 3%; font-size: 43px;}
	#container #home h3 {margin-left: 3%; font-size: 22px;}
	#container #home h3 span {font-size: 22px;}
	#container #home .container>div {margin-top: -83.5px;}
	#container #introduction {height: 730px; padding-top: 40px;}
	#container #introduction h3 {margin-top: 50px;}
	#container #introduction p {width: 100%;}
	#container #introduction p:nth-child(2) {margin: 30px 0 0 0; padding: 0; font-size: 40px;}
	#container #introduction p:nth-child(3) {margin: 10px 0 20px 0; text-align: center; font-size: 15px;}
	#container #introduction ul {width: 80%; margin: 30px 10% 0px 10%;}
	#container #introduction ul>li {width: 33.3%;}
	#container #introduction ul>li>img {width: 100%;}
	#container #mission {height: 1030px; padding-top: 100px; background-image: none;}
	#container #mission h3 {margin-top: 0; padding-left: 0; font-size: 40px;}
	#container #mission h4 {display: block; margin: 0; font-size: 22px;}
	#container #mission h4,#container #mission ol>li>p {float: left;}
	#container #mission h4>strong {width: initial; margin-right: 1px; font-size: 36px;}
	#container #mission ol {margin-top: 40px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p {width: 100%; margin-bottom: 15px; padding-top: 0px;}
	#container #mission ol>li>p,p>strong {font-size: 15px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission .container>.org_btn{top: 106px; left: 0; width: 180px; height: 40px; margin-left: 100px; line-height: 40px;}
	#container #mission ol {margin-top: 20px; padding: 0;}
	#container #mission .org_chart {width: 340px; height: 320px; margin-top: -160px; margin-left: -170px;}
	#container #mission .org_chart img {display: none;}
	#container #mission .org_chart .org_s {display: block; width: 90%; margin-top: 20px; margin-left: 5%;}
	#container #mission .org_chart button {top: 10px; right: 10px; width: 25px; height: 25px;}
	#container #mission .org_chart button span {top: 11.5px; left: 2.5px; width: 20px;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {height: 810px; padding-top: 90px; background-image: none; text-indent: 0}
	#container #core_value h3 {margin-bottom: 30px; font-size: 40px; font-weight: 600;}
	#container #core_value .core_list {position: relative; width: 80%; height: 130px; margin-left: 20%; margin-bottom: 10px; padding: 0 20px;}
	#container #core_value .core_list:before {content: ''; position: absolute; top:50%; left: calc(-20% + -17px); width: 22%; height: 130px; padding: 0 10px; background-size: contain; background-repeat: no-repeat;}
	#container #core_value .core_list:nth-child(2):before {margin-top: -24px; background-image: url(../image/core_icon1.jpg);}
	#container #core_value .core_list:nth-child(3):before {margin-top: -24.5px; background-image: url(../image/core_icon2.jpg);}
	#container #core_value .core_list:nth-child(4):before {margin-top: -27px; margin-left: 15px; background-image: url(../image/core_icon3.jpg); background-size: 35px;}
	#container #core_value .core_list:nth-child(5):before {margin-top: -23px; background-image: url(../image/core_icon4.jpg);}
	#container #core_value .core_list:nth-child(2) {background-color: #e5a136}
	#container #core_value .core_list:nth-child(3) {background-color: #e8d698}
	#container #core_value .core_list:nth-child(4) {background-color: #93e3bc}
	#container #core_value .core_list:nth-child(5) {background-color: #81f1d8}
	#container #core_value .core_list>h4 {padding-top: 10px; margin-bottom: 0; font-size: 26px; font-weight: 500;}
	#container #core_value .core_list>span {padding-left: 2px; font-weight: 200; font-size: 13px; text-indent: 0}
	#container #core_value .core_list>p {margin-top: 5px; margin-bottom: 0; font-size: 15px;}
	#container #ci {position: relative; height: 890px; padding-top: 280px; background-image: none; background-color: #000;}
	#container #ci h4 {display: none;}
	#container #ci .ci_explain {margin: 0; padding: 0}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 80px; left: 50%; width: 350px; height: 220px; margin-left: -175px; background-image: url(../image/ci.jpg); background-size: 140%; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 100%; padding: 0 15px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #e5a137;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #79e3cc;}
	#container .ci_explain>dl>dt {margin-top: 10px;}
	#container .ci_explain>dl>dd {width: 100%; margin: 3px 0; font-size: 14px;}
	#container .ci_explain>dl>dd>strong {font-size: 14px;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand {height: 900px;padding-top: 80px;}
	#container #brand .cat {margin-top: 20px;}
	#container #brand .cat>li {margin: 0;}
	#container #brand .cat>li:nth-child(1) {width: 100%; height: 165px; background-position: 50% 85%}
	#container #brand .cat>li:nth-child(2) {width: 50%; height: 165px; background-size: 120%; background-position: right 30%;}
	#container #brand .cat>li:nth-child(3) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(4) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) {width: 50%; height: 165px; background-size: cover; line-height: 150px;}
	#container #brand .cat>li:nth-child(6) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(7) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(6) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(7) span {line-height: 165px;}
	#container #brand .cat>li>span {line-height: 165px;}
	#container #loction {position: relative; height: 640px; padding-top: 80px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%; height: 230px;}
	#container #loction>.container>div:nth-child(2)>iframe {height: 100%;}
	#container #loction>.container>div:nth-child(3) {width: 100%;}
	#container #loction dl {margin-top: 20px; margin-bottom: 0;}
	#container #loction dl>dt {width: 60px; height: 40px; font-size: 15px;}
	#container #loction dl>dd {height: 40px; font-size: 15px;}
	#container #loction dl dd:nth-child(2)  {margin-bottom: 25px;}
	#container #loction button {width: 95%; margin-left: 2.5%;}
	#footer {height: 64px;}
	#footer address {margin-top: 19px; font-size: 13px; line-height: 12px;}
	#footer address>span {font-size: 10px;}
}

@media (min-width: 406px) and  (max-width: 439px){
	#container #loction dl dd:nth-child(2) {margin-bottom: .5rem}
}


@media (min-width: 320px) and  (max-width: 359px){
	#header {width: 100%; height: 72px;	}
	#header h1 {left: 0; width: 110px; margin: 0; padding-left: 10px; padding-right: 0;}
	#header h1 a img {width: 100%}
	#header nav {display: none;}
	#header .menu {display: block;}
	#header .menu i {font-size: 25px;}
	#header .sub_nav ol>li {margin-left: 5px;}
	#header .sub_nav ol>li>a {width: 35px;height: 35px;}
	#header .sub_nav ul {margin-bottom: 0; padding-top: 80px; padding-left: 0;}
	#header .sub_nav ul a {font-size: 42px;}
	#header .sub_nav ul a:hover {color: #e5ad36; transition: 0s}
	#header .short_cut {display: none;}
	#header .sub_nav button {width: 35px; height: 35px; padding: 0}
	#header .sub_nav button>span {top:15.815px; left:3.185px; width: 30px;}
	#container #home {width: 100%;}
	#container #home h2 {margin-left: 1%; font-size: 40px;}
	#container #home h3 {margin-left: 1%; font-size: 18px;}
	#container #home h3 span {font-size: 18px;}
	#container #home .container>div {margin-top: -68px;}
	#container #introduction {height: 680px; padding-top: 40px;}
	#container #introduction h3 {margin-top: 50px;}
	#container #introduction p {width: 100%;}
	#container #introduction p:nth-child(2) {margin: 30px 0 0 0; padding: 0; font-size: 36px;}
	#container #introduction p:nth-child(3) {margin: 10px 0 10px 0; text-align: center; font-size: 14px;}
	#container #introduction ul {width: 80%; margin: 30px 10% 0px 10%;}
	#container #introduction ul>li {width: 33.3%;}
	#container #introduction ul>li>img {width: 100%;}
	#container #mission {height: 1020px; padding-top: 90px; background-image: none;}
	#container #mission h3 {margin-top: 0; padding-left: 0; font-size: 40px;}
	#container #mission h4 {display: block; margin: 0; font-size: 22px;}
	#container #mission h4,#container #mission ol>li>p {float: left;}
	#container #mission h4>strong {width: initial; margin-right: 1px; font-size: 36px;}
	#container #mission ol {margin-top: 40px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p {width: 100%; margin-bottom: 10px; padding-top: 0px;}
	#container #mission ol>li>p,p>strong {font-size: 15px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission .container>.org_btn{top: 96px; left: 100px; width: 130px; height: 40px; margin-left: 0; font-size: 13px; line-height: 40px;}
	#container #mission ol {margin-top: 20px; padding: 0;}
	#container #mission .org_chart {width: 300px; height: 290px; margin-top: -145px; margin-left: -150px;}
	#container #mission .org_chart img {display: none;}
	#container #mission .org_chart .org_s {display: block; width: 90%; margin-top: 20px; margin-left: 5%;}
	#container #mission .org_chart button {top: 10px; right: 10px; width: 25px; height: 25px;}
	#container #mission .org_chart button span {top: 11.5px; left: 2.5px; width: 20px;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {height: 780px; padding-top: 80px; background-image: none; text-indent: 0}
	#container #core_value h3 {margin-bottom: 20px; font-size: 40px; font-weight: 600;}
	#container #core_value .core_list {position: relative; width: 80%; height: 130px; margin-left: 20%; margin-bottom: 10px; padding: 0 20px;}
	#container #core_value .core_list:before {content: ''; position: absolute; top:50%; left: calc(-20% + -17px); width: 22%; height: 130px; padding: 0 10px; background-size: contain; background-repeat: no-repeat;}
	#container #core_value .core_list:nth-child(2):before {margin-top: -24px; background-image: url(../image/core_icon1.jpg);}
	#container #core_value .core_list:nth-child(3):before {margin-top: -24.5px; background-image: url(../image/core_icon2.jpg);}
	#container #core_value .core_list:nth-child(4):before {margin-top: -27px; margin-left: 15px; background-image: url(../image/core_icon3.jpg); background-size: 35px;}
	#container #core_value .core_list:nth-child(5):before {margin-top: -23px; background-image: url(../image/core_icon4.jpg);}
	#container #core_value .core_list:nth-child(2) {background-color: #e5a136}
	#container #core_value .core_list:nth-child(3) {background-color: #e8d698}
	#container #core_value .core_list:nth-child(4) {background-color: #93e3bc}
	#container #core_value .core_list:nth-child(5) {background-color: #81f1d8}
	#container #core_value .core_list>h4 {padding-top: 10px; margin-bottom: 0; font-size: 26px; font-weight: 500;}
	#container #core_value .core_list>span {padding-left: 2px; font-weight: 200; font-size: 13px; text-indent: 0}
	#container #core_value .core_list>p {margin-top: 5px; margin-bottom: 0; font-size: 15px;}
	#container #ci {position: relative; height: 930px; padding-top: 280px; background-image: none; background-color: #000;}
	#container #ci h4 {display: none;}
	#container #ci .ci_explain {margin: 0; padding: 0}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 80px; left: 50%; width: 350px; height: 220px; margin-left: -175px; background-image: url(../image/ci.jpg); background-size: 140%; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 100%; padding: 0 15px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #e5a137;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #79e3cc;}
	#container .ci_explain>dl>dt {margin-top: 10px;}
	#container .ci_explain>dl>dd {width: 100%; margin: 3px 0; font-size: 14px;}
	#container .ci_explain>dl>dd>strong {font-size: 14px;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand {height: 880px;padding-top: 70px;}
	#container #brand .cat {margin-top: 20px;}
	#container #brand .cat>li {margin: 0;}
	#container #brand .cat>li:nth-child(1) {width: 100%; height: 165px; background-position: 50% 85%}
	#container #brand .cat>li:nth-child(2) {width: 50%; height: 165px; background-size: 120%; background-position: right 30%;}
	#container #brand .cat>li:nth-child(3) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(4) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) {width: 50%; height: 165px; background-size: cover; line-height: 150px;}
	#container #brand .cat>li:nth-child(6) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(7) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(6) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(7) span {line-height: 165px;}
	#container #brand .cat>li>span {line-height: 165px;}
	#container #loction {position: relative; height: 660px; padding-top: 80px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%; height: 230px;}
	#container #loction>.container>div:nth-child(2)>iframe {height: 100%;}
	#container #loction>.container>div:nth-child(3) {width: 100%;}
	#container #loction dl {margin-top: 20px; margin-bottom: 0;}
	#container #loction dl>dt {width: 60px; height: 40px; font-size: 15px;}
	#container #loction dl>dd {height: 40px; font-size: 15px;}
	#container #loction dl dd:nth-child(2)  {margin-bottom: 25px;}
	#container #loction button {width: 95%; margin-left: 2.5%;}
	#footer {height: 64px;}
	#footer address {margin-top: 19px; font-size: 13px; line-height: 12px;}
	#footer address>span {font-size: 10px;}
}


@media (min-width: 280px) and  (max-width: 319px){
	#header {width: 100%; height: 72px;	}
	#header h1 {left: 0; width: 110px; margin: 0; padding-left: 10px; padding-right: 0;}
	#header h1 a img {width: 100%}
	#header nav {display: none;}
	#header .menu {display: block;}
	#header .menu i {font-size: 25px;}
	#header .sub_nav ol {padding-left: 5px}
	#header .sub_nav ol>li {margin-left: 5px;}
	#header .sub_nav ol>li>a {width: 35px;height: 35px;}
	#header .sub_nav ul {left: 10px; margin-bottom: 0; padding-top: 80px; padding-left: 0;}
	#header .sub_nav ul a {font-size: 42px;}
	#header .sub_nav ul a:hover {color: #e5ad36; transition: 0s}
	#header .short_cut {display: none;}
	#header .sub_nav button {width: 35px; height: 35px; padding: 0}
	#header .sub_nav button>span {top:15.815px; left:3.185px; width: 30px;}
	#container #home {width: 100%;}
	#container #home h2 {margin-left: 0; font-size: 36px;}
	#container #home h3 {margin-left: 0; font-size: 18px;}
	#container #home h3 span {font-size: 18px;}
	#container #home .container>div {margin-top: -68px;}
	#container #introduction {height: 100vh; padding-top: 60px;}
	#container #introduction h3 {margin-top: 50px;}
	#container #introduction p {width: 100%;}
	#container #introduction p:nth-child(2) {margin: 30px 0 0 0; padding: 0; font-size: 28px;}
	#container #introduction p:nth-child(3) {margin: 10px 0 10px 0; text-align: center; font-size: 12px;}
	#container #introduction ul {width: 80%; margin: 30px 10% 0px 10%;}
	#container #introduction ul>li {width: 33.3%;}
	#container #introduction ul>li>img {width: 100%;}
	#container #introduction ul>li>span {font-size: 13px;}
	#container #mission {height: 1020px; padding-top: 90px; background-image: none;}
	#container #mission h3 {margin-top: 0; padding-left: 0; font-size: 30px;}
	#container #mission h4 {display: block; margin: 0; font-size: 22px;}
	#container #mission h4,#container #mission ol>li>p {float: left;}
	#container #mission h4>strong {width: initial; margin-right: 1px; font-size: 36px;}
	#container #mission ol {margin-top: 40px}
	#container #mission ol>li:nth-child(1) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(2) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(3) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(4) h4>strong {color: #79e3cc;}
	#container #mission ol>li:nth-child(5) h4>strong {color: #e5ad36;}
	#container #mission ol>li:nth-child(6) h4>strong {color: #79e3cc;}
	#container #mission ol>li>p {width: 100%; margin-bottom: 10px; padding-top: 0px;}
	#container #mission ol>li>p,p>strong {font-size: 13px;}
	#container #mission .col-md-5 {display: none;}
	#container #mission .col-md-7 {width: 100%;}
	#container #mission .container>.org_btn{top: 96px; left: 100px; width: 130px; height: 40px; margin-left: 0; font-size: 13px; line-height: 40px;}
	#container #mission ol {margin-top: 20px; padding: 0;}
	#container #mission .org_chart {width: 300px; height: 290px; margin-top: -145px; margin-left: -150px;}
	#container #mission .org_chart img {display: none;}
	#container #mission .org_chart .org_s {display: block; width: 90%; margin-top: 20px; margin-left: 5%;}
	#container #mission .org_chart button {top: 10px; right: 10px; width: 25px; height: 25px;}
	#container #mission .org_chart button span {top: 11.5px; left: 2.5px; width: 20px;}
	#container #mission .scr_down span {background-color: #000;}
	#container #core_value {height: 780px; padding-top: 30px; background-image: none; text-indent: 0}
	#container #core_value h3 {margin-bottom: 20px; font-size: 40px; font-weight: 600;}
	#container #core_value .core_list {position: relative; width: 80%; height: 130px; margin-left: 20%; margin-bottom: 10px; padding: 0 20px;}
	#container #core_value .core_list:before {content: ''; position: absolute; top:50%; left: calc(-20% + -17px); width: 22%; height: 130px; padding: 0 10px; background-size: contain; background-repeat: no-repeat;}
	#container #core_value .core_list:nth-child(2):before {margin-top: -24px; background-image: url(../image/core_icon1.jpg);}
	#container #core_value .core_list:nth-child(3):before {margin-top: -24.5px; background-image: url(../image/core_icon2.jpg);}
	#container #core_value .core_list:nth-child(4):before {margin-top: -27px; margin-left: 15px; background-image: url(../image/core_icon3.jpg); background-size: 35px;}
	#container #core_value .core_list:nth-child(5):before {margin-top: -23px; background-image: url(../image/core_icon4.jpg);}
	#container #core_value .core_list:nth-child(2) {background-color: #e5a136}
	#container #core_value .core_list:nth-child(3) {height: 155px; background-color: #e8d698}
	#container #core_value .core_list:nth-child(4) {height: 155px; background-color: #93e3bc}
	#container #core_value .core_list:nth-child(5) {background-color: #81f1d8}
	#container #core_value .core_list>h4 {padding-top: 10px; margin-bottom: 0; font-size: 26px; font-weight: 500;}
	#container #core_value .core_list>span {padding-left: 2px; font-weight: 200; font-size: 13px; text-indent: 0}
	#container #core_value .core_list>p {margin-top: 5px; margin-bottom: 0; font-size: 15px;}
	#container #ci {position: relative; height: 980px; padding-top: 280px; background-image: none; background-color: #000;}
	#container #ci h4 {display: none;}
	#container #ci .ci_explain {margin: 0; padding: 0}
	#container #ci .ci_explain:before {content: ''; position: absolute; top: 80px; left: 50%; width: 350px; height: 220px; margin-left: -175px; background-image: url(../image/ci.jpg); background-size: 140%; background-position: center}
	#container #ci .ci_explain dl {float: left; width: 100%; padding: 0 15px;}
	#container .ci_explain>dl:nth-child(3)>dt {color: #e5a137;}
	#container .ci_explain>dl:nth-child(4)>dt {color: #79e3cc;}
	#container .ci_explain>dl>dt {margin-top: 10px;}
	#container .ci_explain>dl>dt:before {top: 13px; left: 14px;}
	#container .ci_explain>dl:nth-child(1)>dt:before {top: 13px;}
	#container .ci_explain>dl>dd {width: 100%; margin: 3px 0; font-size: 14px;}
	#container .ci_explain>dl>dd>strong {font-size: 14px;}
	#container #ci .scr_down span:nth-child(1) {background-color: #fff;}
	#container #brand {height: 880px;padding-top: 70px;}
	#container #brand .cat {margin-top: 20px;}
	#container #brand .cat>li {margin: 0;}
	#container #brand .cat>li:nth-child(1) {width: 100%; height: 165px; background-position: 50% 85%}
	#container #brand .cat>li:nth-child(2) {width: 50%; height: 165px; background-size: 120%; background-position: right 30%;}
	#container #brand .cat>li:nth-child(3) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(4) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) {width: 50%; height: 165px; background-size: cover; line-height: 150px;}
	#container #brand .cat>li:nth-child(6) {width: 50%; height: 165px; line-height: 150px;}
	#container #brand .cat>li:nth-child(7) {width: 50%; height: 165px;}
	#container #brand .cat>li:nth-child(5) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(6) span {line-height: 165px;}
	#container #brand .cat>li:nth-child(7) span {line-height: 165px;}
	#container #brand .cat>li>span {line-height: 165px;}
	#container #loction {position: relative; height: 660px; padding-top: 80px;}
	#container #loction h3 {margin-bottom: 20px;}
	#container #loction>.container>div:nth-child(2) {width: 100%; height: 230px;}
	#container #loction>.container>div:nth-child(2)>iframe {height: 100%;}
	#container #loction>.container>div:nth-child(3) {width: 100%;}
	#container #loction dl {margin-top: 20px; margin-bottom: 0;}
	#container #loction dl>dt {width: 60px; height: 40px; font-size: 15px;}
	#container #loction dl>dd {height: 40px; font-size: 15px;}
	#container #loction dl dd:nth-child(2)  {margin-bottom: 25px;}
	#container #loction button {width: 95%; margin-left: 2.5%;}
	#footer {height: 64px;}
	#footer address {margin-top: 19px; font-size: 13px; line-height: 12px;}
	#footer address>span {font-size: 10px;}
}


@media (max-height: 580px){
	#header .menu {display: none;}
}









/*/* SCROLL */
::-webkit-scrollbar { width: 2px; }
 /*스크롤바의 width */
::-webkit-scrollbar-track { background-color: #000; }
 /*스크롤바의 전체 배경색 */
::-webkit-scrollbar-thumb { 
    background: #fff;}
/* 스크롤바 색 */
::-webkit-scrollbar-button { display: none; }
/* 위 아래 버튼 (버튼 없애기를 함) */