﻿/* base style - start */
	/* navigation */
	.navbar-fixed-top { position: absolute; }

	/* IE10+ */
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		.navbar .nav-justified > .dropdown > a { padding: 30px 0 18px 0; }
	}

	/* Main Slider styles - start
	-------------------------------------------------- */
		.mainslider { margin-top: 0px; margin-bottom: -1%; }
		.mainslider > .bx-wrapper { margin-bottom: 0em; box-shadow: none; border: 0; background-color: transparent; z-index: 1; }
		.mainslider > .bx-wrapper img { margin: auto; max-width: 114.5%; }
		.mainslider > .bx-wrapper > .bx-viewport {}
		.mainslider > .bx-wrapper > .bx-viewport .bxslider li { min-width: 1400px; }
		.mainslider > .bx-wrapper > .bx-viewport .bxslider li video { background-color: #000000; width: 100%; max-width: 2200px; margin: auto; display: block; }
		.mainslider > .bx-wrapper > .bx-viewport .caption { position: absolute; width: inherit; top: 35%; }
		.mainslider > .bx-wrapper > .bx-viewport .caption .container {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 { margin: 0 auto 0 auto; text-align:center; background-color: rgba(0,0,0, 0); color: #ffffff; font-weight: 800; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 { margin: 0 auto 0 auto; text-align:center; background-color: rgba(0,0,0, 0); color: #ffffff; font-weight: 800; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 { padding: 0.7em 0.3em 0.3em 0.3em; width: 80%; /*max-width: 860px;*/ font-size: 3em; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 { padding: 0.3em 0.3em 0.7em 0.3em; width: 80%; /*max-width: 860px;*/ font-size: 2.4em; word-break: keep-all; }
		.mainslider > .bx-wrapper > .bx-controls > .bx-controls-direction,
		.mainslider > .bx-wrapper > .bx-controls > .bx-pager { display:none; }
	/* Main Slider styles - end
	-------------------------------------------------- */

	/* Main Block styles - start
	-------------------------------------------------- */
		.section {}
		.section .container {}
		.section a,
		.section a:focus,
		.section a:hover { text-decoration: auto; }


		.section.vision {}
		.section.vision > img { max-width: 100%; display: block; margin: auto; }
		.section.vision > .caption { position: absolute; width: 100%; }
		.section.vision > .caption .container {}
		.section.vision > .caption .container a:before,
		.section.vision > .caption .container a:after { content:''; display: block; }
		.section.vision > .caption .container h1 { display: inline-block; width: max-content; margin: 0 auto 0 0; color: #ffffff; font-weight: 800; }
		.section.vision > .caption .container h2 { display: inline-block; width: max-content; margin: 0 auto 0 0; color: #ffffff; font-weight: 700; }
		.section.vision > .caption .container h1 {}
		.section.vision > .caption .container h2 { word-break: keep-all; }


		.section.product {}
		.section.product > .container { position: relative; width: 100%; display: flex; flex-direction: row; justify-content: space-between; max-width: 1980px; }
		.section.product > .container:before { flex-grow: 1; }
		.section.product > .container .desc { flex-grow: 1; }
		.section.product > .container .pic { flex-grow: 0; }
		.section.product > .container .desc { max-width: 28%; }
		.section.product > .container .pic { flex-basis: 23%; max-width: 420px; }

		.section.product > .container .desc a:before,
		.section.product > .container .desc a:after { content:''; display: block; }
		.section.product > .container .desc h2 { margin: 0 auto 0 0; color: #333333; font-weight: 800; }
		.section.product > .container .desc p { margin: 0 auto 0 0; color: #333333; font-weight: 700; }
		.section.product > .container .desc h2 { padding: 1.23em 0em 0em 0em; font-size: 4.65em; }
		.section.product > .container .desc p { padding: 1em 0em 0em 0em; font-size: 1.5em; word-break: keep-all; }

		.section.product > .container .pic { position: relative; display: inline-block; }
		.section.product > .container .pic .example { position: absolute; top: 79%; }
		.section.product > .container .pic .example p { font-size: 2.4em; color: #ffffff; line-height: 1em; }

		.section.hdi > .container {}
		.section.hdi > .container .desc { padding-right: 75px; }
		.section.hdi > .container .pic .example { max-width: 100%; left: 14% /*4.2em*/; }

		.section.sps > .container { flex-direction: row-reverse; }
		.section.sps > .container .desc { padding-left: 75px; }
		.section.sps > .container .pic .example { max-width: 50%; right: 14% /*4.2em*/; }


		.section.world { background-repeat: no-repeat; background-position: top center; background-size: cover; }
		.section.world .container {}


		.section.media { margin-top: 0; background-color: #999999; }
		.section.media > .container { position: relative; width: 100%; display: flex; flex-direction: row; }
		.section.media > .container:before {}
		.section.media > .container:after {}
		.section.media > .container .item { flex-grow: 1; }
		.section.media > .container .item h2 { font-size: 1.72em; color: #ffffff; font-weight: 600; margin: 3.28em 0em 0.71em 0em; }
		.section.media > .container .item .desc {}
		.section.media > .container .item .more { font-size: 1.62em; color: #ffffff; font-weight: 500; display: flex; justify-content: end; margin: 0em 0em 2.5em 0em; }
		.section.media > .container .item .more:after { content:''; display: inline-block; width: 30px; background: url('../images/main/icon_s.png') no-repeat right 0.3em; }

		.section.media > .container .video {}
		.section.media > .container .press {}
		.section.media > .container .press .desc { width: 100%; }
	/* Main Block styles - end
	-------------------------------------------------- */


	/* 사진 변화처리(transform) 효과: https://gahyun-web-diary.tistory.com/79 */
		.bg_area { max-width: 100%; height:100%; background:no-repeat center /cover; }

		.pic { overflow: hidden; }
		.pic:hover .trans_img { -webkit-transform: scale(1.15) skew(-0.003deg); -ms-transform: scale(1.15) skew(-0.003deg); transform: scale(1.15) skew(-0.003deg); }
		.pic .trans_img { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

/* base style - end */


/* 반응형 처리
-------------------------------------------------- */
@media (min-width: 768px) {
	/* Main Slider styles - start
	-------------------------------------------------- */
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media (min-width: 993px) {	/* PC용 최소 폭 */
	/* Main Slider styles - start
	-------------------------------------------------- */
		.mainslider { margin-top: 0px; }
		.mainslider > .bx-wrapper { margin-bottom: 0em; box-shadow: none; border: 0; }
		.mainslider > .bx-wrapper > .bx-viewport {}
		.mainslider > .bx-wrapper > .bx-viewport .bxslider li { min-width: 1400px; }
		.mainslider > .bx-wrapper > .bx-viewport .caption { position: absolute; }
		.mainslider > .bx-wrapper > .bx-viewport .caption .container {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 { font-size: 4.1em; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 { font-size: 3.3em; }
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
		.section.vision > .caption .container h1 { padding: 0.6em 0em 0em 0em; font-size: 6.0em; }
		.section.vision > .caption .container h2 { padding: 0em 0em 0em 0em; font-size: 2.00em; }


		.section.product > .container .desc { max-width: 30%; }
		.section.product > .container .desc h2 { font-size: 2.50em; }
		.section.product > .container .desc p { font-size: 1.1em; }
		.section.product > .container .pic { height: 300px; }
		.section.product > .container .pic .example p { font-size: 1.4em; line-height: 1em; }

		.section.hdi > .container .desc { padding-right: 4%; }
		.section.sps > .container .desc { padding-left: 1%; }

		.section.world { min-height: 580px; }


		.section.media > .container { justify-content: space-between; }
		.section.media > .container .item { flex-basis: 50%; max-width: 528px; }

		.section.media > .container .press .desc { height: 55.137%; }
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media (min-width: 1200px) {
	/* Main Slider styles - start
	-------------------------------------------------- */
		.mainslider {}
		.mainslider > .bx-wrapper {}
		.mainslider > .bx-wrapper > .bx-viewport {}
		.mainslider > .bx-wrapper > .bx-viewport .caption {}
		.mainslider > .bx-wrapper > .bx-viewport .caption .container {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 { font-size: 78px; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 { font-size: 55px; }
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
		.section.vision > .caption .container h1 { padding: 0.6em 0em 0em 0em; font-size: 6.0em; }
		.section.vision > .caption .container h2 { font-size: 2.00em; }


		.section.product > .container .desc { max-width: 28%; }
		.section.product > .container .desc h2 { font-size: 3.20em; }
		.section.product > .container .pic { height: 380px; }
		.section.product > .container .pic .example p { font-size: 2.0em; }

		.section.sps > .container .desc { padding-left: 4%; }


		.section.world { min-height: 700px; }


		.section.media > .container { justify-content: flex-start; }
		.section.media > .container .item { flex-basis: 30%; }

		.section.media > .container .video { margin-right: 52px; }
		.section.media > .container .press .desc { height: 57.076%; }
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media all and (min-width: 1450px) {
	/* Main Block styles - start
	-------------------------------------------------- */
		.section.vision > .caption .container h1 { padding: 1.03em 0em 0em 0em; font-size: 7.3em; }
		.section.vision > .caption .container h2 { font-size: 2.57em; }


		.section.product > .container .desc h2 { font-size: 3.70em; }
		.section.product > .container .pic { height: 670px; }
		.section.product > .container .pic .example p { font-size: 2.15em; }


		.section.world { min-height: 750px; background-size: auto; }
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media all and (min-width: 1800px) {
	/* Main Block styles - start
	-------------------------------------------------- */
		.section.vision > .caption .container h1 { padding: 1.23em 0em 0em 0em; font-size: 9.3em; }
		.section.vision > .caption .container h2 { font-size: 3.57em; }

		.section.product > .container .desc { flex-basis: 445px; max-width: 520px; }
		.section.product > .container .desc h2 { font-size: 4.65em; }
		.section.product > .container .desc p { font-size: 1.5em; }
		.section.product > .container .pic { flex-basis: 23%; max-width: 420px; height: 670px; }
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media all and (min-width: 1900px) {
	/* Main Slider styles - start
	-------------------------------------------------- */
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
		.section.product > .container .desc { max-width: 580px; }


		.section.world {}
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media (max-width: 992px) {	/* 스마트 폰으로 인정하는 최대 폭 */
	/* Main Slider styles - start
	-------------------------------------------------- */
		.mainslider { margin-top: 0px; }
		.mainslider > .bx-wrapper { margin-bottom: 0em; box-shadow: none; border: 0; }
		.mainslider > .bx-wrapper > .bx-viewport {}
		.mainslider > .bx-wrapper > .bx-viewport .bxslider li { min-width: auto; }
		.mainslider > .bx-wrapper > .bx-viewport .caption { position: absolute; }
		.mainslider > .bx-wrapper > .bx-viewport .caption .container {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 { font-size: 3.5em; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 { font-size: 2.8em; }
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
		.section.vision > .caption .container { padding: 0 15px 0 15px; }
		.section.vision > .caption .container h1 { padding: 0.6em 0em 0em 0em; font-size: 6.0em; }
		.section.vision > .caption .container h2 { padding: 0em 0em 0em 0em; font-size: 2.0em; }


		.section.product > .container .desc { max-width: 30%; }
		.section.product > .container .desc h2 { padding-top: 0.2em; font-size: 2.0em; }
		.section.product > .container .desc p { font-size: 1.1em; }
		.section.product > .container .pic { height: 300px; }
		.section.product > .container .pic .example { top: 60%; }
		.section.product > .container .pic .example p { font-size: 1.4em; line-height: 1em; }

		.section.hdi > .container .desc { padding-right: 4%; }
		.section.hdi > .container .pic .example { left: 7% /*4.2em*/; }
		.section.sps > .container .desc { padding-left: 4%; }
		.section.sps > .container .pic .example { max-width: 70%; right: 7% /*4.2em*/; }


		.section.world { min-height: 500px; background-size: 170%; background-position-x: 38%;}


		.section.media > .container { flex-direction: column; justify-content: flex-start; }
		.section.media > .container:before {}
		.section.media > .container:after {}
		.section.media > .container .item { padding: 0 15px 0 15px; }
		.section.media > .container .item h2 { margin-top: 1.28em; }
		.section.media > .container .item .more { font-size: 1.22em; margin-bottom: 1.5em; }

		.section.media > .container .video {}
		.section.media > .container .press .desc { height: 240px; }
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media (max-width: 767px) {	/*스마트 폰 가로방향*/
	/* Main Slider styles - start
	-------------------------------------------------- */
		.mainslider { /*margin-top: 68px;*/ }
		.mainslider > .bx-wrapper > .bx-viewport .caption .container {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 { font-size: 2.2em; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 { font-size: 1.7em; }
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
		.section.vision > .caption .container h1 { font-size: 4.0em; }
		.section.vision > .caption .container h2 { font-size: 1.4em; }


		.section.product > .container { display: table; padding: 0 15px 0 15px; }
		.section.product > .container .desc { max-width: 100%; }
		.section.product > .container .desc h2 { padding-top: 0.6em; }
		.section.product > .container .pic { width:100%; max-width: 100%; height:200px; }
		.section.product > .container .pic .example { top: 85%; }

		.section.hdi > .container .desc { padding-right: 0; padding-bottom: 5%; }
		.section.sps > .container .desc { padding-left: 0; padding-bottom: 5%; }


		.section.world { min-height: 400px; }
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media (max-width: 427px) {	/*스마트 폰 세로방향*/
	/* Main Slider styles - start
	-------------------------------------------------- */
		.mainslider { height: 550px; }
		.mainslider > .bx-wrapper img { width: 1150px; margin-left: -370px; max-width: initial; }
		.mainslider > .bx-wrapper > .bx-viewport .caption { top: 40%; }
		.mainslider > .bx-wrapper > .bx-viewport .caption .container {}
		.mainslider > .bx-wrapper > .bx-viewport .caption h1 { font-size: 1.7em; width: 100%; }
		.mainslider > .bx-wrapper > .bx-viewport .caption h2 { font-size: 1.5em; width: 100%; }
		.mainslider > .bx-wrapper > .bx-viewport .bxslider li { max-height: 550px; overflow: hidden; }
		.mainslider > .bx-wrapper > .bx-viewport .bxslider li video { width: 1100px; margin-left: -370px; }
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
		.section.vision > .caption .container h1 { font-size: 2.0em; }
		.section.vision > .caption .container h2 { font-size: 1.2em; }


		.section.product > .container .desc h2 { font-size: 1.4em; }


		.section.world { min-height: 230px; }
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media (max-width: 375px) {
	/* Main Slider styles - start
	-------------------------------------------------- */
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
	/* Main Block styles - end
	-------------------------------------------------- */
}
@media (max-width: 349px) {
	/* Main Slider styles - start
	-------------------------------------------------- */
	/* Main Slider styles - end
	-------------------------------------------------- */


	/* Main Block styles - start
	-------------------------------------------------- */
	/* Main Block styles - end
	-------------------------------------------------- */
}
