/* ------------------------------------------------------------------ */
/* Common Styles
main : 113f8c
point : 1b2020
point : 6a6d87
'notokr', 'Lato', sans-serif, 'Lato', 'FontAwesome', "Font Awesome 5 Free"

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
*/
/* ------------------------------------------------------------------ */
article {margin-bottom: 80px;}
article:last-child {margin-bottom: 0;}


/*---------------------------------------------------------
  2. Typography
  Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: 'Ubuntu', sans-serif; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 40px; line-height: 1.5; }
h2 { font-size: 32px; line-height: 1.5; }
h3 { font-size: 28px; line-height: 1.5; }
h4 { font-size: 24px; line-height: 1.5; }
h5 { font-size: 18px; line-height: 1.5;}
h6 { font-size: 16px; line-height: 1.5; }
.subheader { }
p { margin: 0 0 30px 0; font-family: 'Ubuntu', sans-serif; font-size: 16px; font-weight: 400; }
p img { margin: 0; }
p.lead { font: 26px/1.8 'Lato', sans-serif; margin-bottom: 18px; color: #666; font-weight: 700; }
p.head { font: 22px/1.5 'Lato', sans-serif; margin-bottom: 10px; color: #666; font-weight: 700; }

@media screen and (max-width: 768px) {
  h1 { font-size: 32px;}
  h2 { font-size: 28px;}
  h3 { font-size: 24px;}
  h4 { font-size: 18px;}
  h5 { font-size: 16px;}
  h6 { font-size: 14px;}
}

@media screen and (max-width: 640px) {
  p.lead {font-size: 18px;}
  p.head {font-size: 16px;}
  p { font-size: 16px;}
}

@media screen and (max-width: 480px) {
  h1 { font-size: 28px;}
  h2 { font-size: 24px;}
  h3 { font-size: 20px;}
  h4 { font-size: 18px;}
  h5 { font-size: 16px;}
  h6 { font-size: 14px;}
}
/* for 'em' and 'strong' tags, font-size and line-height should be same with
the body tag due to rendering problems in some browsers */

em { font-size: 15px; font-style: italic; }
strong, b { font-weight: bold;}
small { font-size: 11px; line-height: inherit; }

/*---------------------------------------------------------
3. List
--------------------------------------------------------- */
ul, ol { margin-bottom: 0; margin-top: 0; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol, ol ol, ol ul { margin: 0x; }
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 0; }
li { line-height: 1.7; }
ul.large li { }
li p { }

/*---------------------------------------------------------
4. Images
--------------------------------------------------------- */
img { max-width: 100%; height: auto; vertical-align: top;}
img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }
i {font-style: normal;}
.cont-img {width: 100%;  margin:0 0 30px 0px;}
.cont-img img {width: 100% ; margin:0;}
.cont-ov-img {width: 100%;  margin:0 0 30px -30px;}
.cont-ov-img img {width: 100% ; margin:0;}

/*---------------------------------------------------------
5. page
--------------------------------------------------------- */
.page section { padding-top: 0px; padding-bottom: 12px; }
.content-img {width: 100%; margin-bottom: 30px;}
.page h1, .title-heading { line-height: 1.2; font-weight: 300; letter-spacing: -0.02em}
.page h1:after {background:rgba(0, 24, 53, 0.2); content:""; display:block; height:3px;width:50px;margin:20px 0 40px 0;}
.page h1 span {color: #444; font-weight: 700;}
.page h2 {font-weight: 400;}
.page h3 {font-weight: 700; margin-bottom: 30px;}
.page h3 span {font-weight: 700;}

@media screen and (max-width:1024px) {
  .content-img {width: 100%;}
  .content-img img {width: 100%;}
}

@media screen and (max-width: 768px) {
  .page h1,  .title-heading { font-size: 32px; line-height: 42px;font-family: inherit; text-align: center;}
  .page h1:after {margin:10px auto 40px;}
  .page h1, .page p.lead { text-align: center; }
}

/* ------------------------------------------------------------------ */
/* About Styles
/* ------------------------------------------------------------------ */

.cont_about {font-weight: 100;}

.txt-point {font-size: 28px; text-align: center; }
.txt-point span {font-size: 36px;}
span.l-font1 {font-family: 'Lato', sans-serif; font-size: 48px; text-align: center; color: #1b2020;}
span.l-font2 {font-family: 'Lato', sans-serif; font-size: 36px; text-align: center; color: #6a6d87;}

@media screen and (max-width: 640px) {
  .txt-point {font-size: 24px;}
  .txt-point span {font-size: 28px;}
  span.l-font1 {font-size: 32px;}
  span.l-font2 {font-size: 28px;}

}


#Device article {margin: 0;}
#Device article.padding {padding: 80px 0;}
#Device h1.text-center::after {margin: 20px auto 40px;}
#Device .title {
  font-size: 40px;text-align: center; font-weight: 700; color: #fff; 
  background: #6a6d87;
  /* background: url('../images/menu2/m3-aoctops.jpg') 50% 50% / cover; */
}
#Device p {padding-top: 100px;}

#Device .box-wrap {display: flex;}
#Device .box-wrap .box-inner {width: calc(100% / 2); padding: 200px 0;text-align: center;}
#Device .box-wrap .box-inner:nth-child(1) {background: url('../images/menu2/m3-aoc-busin.jpg') 50% 50% / cover;}
#Device .box-wrap .box-inner:nth-child(2) {background: #ccc url('../images/menu2/m3-img-product-bg.png') 50% 50% / cover;}
#Device .box-wrap .box-inner .txt-box {color: #fff;}
#Device .box-wrap .box-inner .txt-box h2 {font-weight: 700;}
#Device .box-wrap .box-inner .txt-box h3 {}

@media screen and (max-width: 640px) {
  #Device article.padding {padding: 40px 0;}
  #Device .s03 {margin-bottom: 20px;}
  #Device .title {width: calc(100% + 20px); margin-left: -10px; padding: 40px 20px; font-size: 26px;}
  #Device p {padding: 0;}
  #Device .box-wrap {flex-wrap: wrap;}
  #Device .box-wrap .box-inner {width: 100%; padding: 80px 0;}
}

.device {}
.device .icon-wrap {display: flex; margin-bottom: 60px;}
.device .icon-wrap:nth-child(odd) {justify-content: center;} 
.device .icon-wrap:nth-child(2) {justify-content: space-around;}
.device .icon-wrap:nth-child(3) .icon-box {margin: 0 50px;}

.device .icon-wrap .center {display: flex; justify-content: center; align-items: center; width: 300px;height: 246px;}
.device .icon-wrap .center span {
  padding: 30px;
  font-size: 36px; font-weight: 700; text-align: center; line-height: 1.2; color: #fff;
  background: #343c49; 
  border-radius: 80px;
}
.device .icon-wrap .icon-box {width: 300px; text-align: center; }
.device .icon-wrap .icon-box p {margin: 0; padding: 0 !important; font-size: 20px; font-weight: 700;}
@media screen and (max-width: 640px) {
  .device .icon-wrap {display: flex; flex-wrap: wrap; margin-bottom: 0;}
  .device .icon-wrap .center {display: none;}
  .device .icon-wrap .icon-box {margin-bottom: 30px;}
  .device .icon-wrap .icon-box img {width: 50%;}
  .device .icon-wrap:nth-child(3) .icon-box {margin:0 0 30px;}
}

/* ------------------------------------------------------------------ */
/* Applications Styles
/* ------------------------------------------------------------------ */
.display_box {}
.display_box img {margin-bottom: 15px;}
.display_box h5 {text-align: center;}

#header {padding-bottom: 60px; text-align: center;}
#header h1 {margin-bottom: 30px; color: #222; font-weight: 700;}
#header h1:after {display: none;}
#header .head {font-weight: 400;}
#header .cont-img img {width: auto; max-width: auto;}

/* ===================================================================
 * 13. infos - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#infos {}

.info-entry {position: relative;}

.info-entry .half-grey {
	width: 50%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
    background: none;
	/* background: rgba(63, 80, 96, 0.15); */
}

.info-entry .info-entry-content {display: flex; position: relative;}
.info-entry .info-entry-content {padding-top: 0;padding-bottom: 0;}

.info-entry .media-wrap { width: 50%;}
.info-entry .text-part {display: flex; align-items: center; }

.info-entry .media-wrap img {max-width: 100%;}
.info-entry:nth-child(odd) .media-wrap { order:1; padding-left: 0; padding-right: 20px;}
.info-entry:nth-child(odd) .text-part {padding-left: 20px;padding-right: 70px;}

.info-entry:nth-child(even) .half-grey {left: 0;}
.info-entry:nth-child(even) .media-wrap {order:0; padding-right: 0; padding-left: 20px;}
.info-entry:nth-child(even) .text-part {padding-left: 70px;padding-right: 20px;}


.info-entry-content h5 {
	color: rgba(0, 24, 53, 0.4);
	margin-bottom: .6rem;
	margin-left: .2rem;
	font-size: 1.5rem;
}

.info-entry-content h1 { position: relative; }
.info-entry-content h1::after {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	background: rgba(0, 24, 53, 0.2);
}
.info-entry-content p {margin: 0;}
.info-entry:last-child .info-entry-content {
	padding-bottom: 13.2rem;
}

/* -------------------------------------------------------------------
 * responsive:
 * infos
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1024px) {
	.info-entry:nth-child(odd) .media-wrap {padding-right: 20px;}
	.info-entry:nth-child(odd) .text-part {	padding-left: 20px;	padding-right: 40px;}
	.info-entry:nth-child(even) .media-wrap {padding-left: 20px;}
	.info-entry:nth-child(even) .text-part {padding-left: 40px;	padding-right: 20px;}

}

@media only screen and (max-width:900px) {
	#infos {padding-top: 4.2rem;padding-bottom: 3rem;}

	.info-entry .half-grey {display: none;}

	.info-entry .info-entry-content {
        flex-direction: column;
		max-width: 640px;
        margin: 0 auto;
		padding-top: 9rem;
		padding-bottom: 7.8rem;
		border-bottom: 1px solid rgba(0, 24, 53, 0.1);
	}

    .info-entry-content h1::after {margin: 20px auto 40px;}

	.info-entry .info-entry-content .media-wrap,
	.info-entry .info-entry-content .text-part {
		order: 0; padding: 0 15px;
	}

	.info-entry .info-entry-content .media-wrap {
		position: static;
		width: 100%;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		margin-bottom: 4.2rem;
	}

	.info-entry .info-entry-content .text-part {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}
	.info-entry .info-entry-content .button {margin: 0 0 1.5rem 0;}
	.info-entry .info-entry-content h2::after {left: 50%; margin-left: -25px;}
	.info-entry:last-child .info-entry-content {border: none;}

}

@media only screen and (max-width:600px) {
	.info-entry .info-entry-content .media-wrap,
	.info-entry .info-entry-content .text-part {
		padding: 0 10px;
	}
	.info-entry .info-entry-content h2 { font-size: 3rem; line-height: 1.3;}

}

@media only screen and (max-width:480px) {
	.info-entry .info-entry-content {padding-top: 7.8rem; padding-bottom: 6rem;}
    .info-entry:first-child .info-entry-content {padding-top: 0;}
	.info-entry .info-entry-content .media-wrap,
	.info-entry .info-entry-content .text-part {
		padding: 0;
	}
	.info-entry .info-entry-content h2 { font-size: 2.8rem;	line-height: 1.3;}
}

/* ------------------------------------------------------------------ */
/* Location Styles
/* ------------------------------------------------------------------ */
/* Location */
 h4.add {display:block; margin:20px 0 10px 5px; font-weight: 400; }
 .add_table {width:100%; border-top:2px solid #444; border-bottom: 1px solid #ccc; }
 .add_table td {padding: 8px 10px;border-bottom: 1px solid #e5e5e5}
 .add_table td.sub{font-weight:400; color: #222; background-color:#f5f5f5;}
 .map {display:block; margin-top: 20px; border: 0px solid #e5e5e5 }


/* ------------------------------------------------------------------ */
/* IP & Foundry Service Styles
/* ------------------------------------------------------------------ */

.ip_cont {margin-bottom: 60px;}

/* ------------------------------------------------------------------ */
/* formmail Module Styles
/* ------------------------------------------------------------------ */
.formmail .formmail_title_bgcolor {background: none;}
.formmail .formmail_title_bgcolor font {display: block; width: 90%; margin: 5px; padding: 5px; font-size: 14px; line-height: 24px;background: #444; border-radius: 3px;}
.formmail .formmail_title_bgcolor, .formmail .formmail_cell_bgcolor {float:none !important;vertical-align: top; }
.formmail .btn-area {margin-top: 20px;}
.formmail .btn-area input {margin: 0;}

/* ------------------------------------------------------------------ */
/* Board Module Styles
/* ------------------------------------------------------------------ */
/* Board Common */
.bbsnewf5 {font:inherit !important}
.bbsnewf5 a:hover {color:#f2da00 !important}
.bbsnewf5 input {margin: 0;}
.board {font-family:inherit !important}

.ico-board {width:100%; margin-bottom:40px; border-top:2px solid #444}
.ico-board .att_title, .ico-board .att_title font {text-align: center; color: #444 !important ; background: none;}
.ico-board input[type=file] {width:80%}
.ico-board input[type=text], .ico-board input[type=password] {width:80%; }
.ico-board tbody td {font:inherit !important; font-size:14px !important; padding:5px; border-bottom:1px solid #444}
.ico-board tbody td font, .ico-board tbody td span, .ico-board tbody td a {font:inherit !important; font-size:14px !important}
.board_bgcolor, .board_bgcolor span {width:30% !important; font:inherit !important; color:#444 !important; background:#none !important}
#post_area {padding: 0;}
#post_area img {width:100% !important; height:auto !important}
.prvThumbList {margin-top:40px}
.prvThumbList > table td table {width:135px}
div.nneditor-container .seResize2 span {font-size:0 !important}
.brd_btngroup {margin-top:50px}
.brd_btngroup a {margin-top:2px; margin-bottom:2px}
#check_all {margin-left:5px; vertical-align:-5px}
.board_bottom {margin-top:50px}
.board_bottom > a {float:right}
.board_admin_bgcolor {vertical-align: top;}
#ext_search {float:none}
table#search_table {float: none; width: 370px !important; margin: 0 auto !important;}
table#search_table .est_keyword_cell input {width: 94% !important ;}
.est_btn_cell {vertical-align:middle;}

.board_comment_bgcolor {padding-bottom:20px; background-color:#f9f9f9 !important}
.comment_txt {padding:10px 0 !important; word-break:}
.comment_txt:first-child {padding:20px !important}
.comment_txt textarea {width:60%; width:-webkit-calc(100% - 120px); width:-moz-calc(100% - 120px); width:calc(100% - 120px); height:50px; padding:10px; font:inherit !important; border:1px solid #e8e8e8; border-radius:3px}
.comment_txt > a.btn {margin:2px 0; padding:0 15px !important; height:30px !important; line-height:28px !important}
.comment_txt > font {display:block; margin-bottom:10px; color:#ccc !important}


/* Gallery Style */
.gallery { }
.gallery > table {float:left; display:block; width:30.89% !important; margin:0 1.219% 10px 1.219%}
.gallery > table.board {float: none; }
.gallery td.bbsnewf5 {position:relative; overflow:hidden; border: 1px solid #e5e5e5}
.gallery td.bbsnewf5:hover, .gallery td.bbsnewf5:focus {box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); cursor: pointer; }
.gallery td.bbsnewf5 > table td a {display: block; overflow: hidden}
.gallery td.bbsnewf5 a > img {display:block; width:100%; height:auto !important; transition:all .5s ease}
.gallery td.bbsnewf5 a:hover > img {transform:scale(1.1)}

.gallery .hoverBox {position:absolute; display:block; top:0; left:0; width:100%; height:100%; padding:32% 30px 0 30px; text-align:center; background:rgba(0,0,0,.8); opacity:0; transition:all .5s ease}
.gallery .hoverBox .inner {}
.gallery .hoverBox .inner h3 {font-size:24px; font-weight:600; color:#fff; line-height:1.2}
.gallery .hoverBox .inner h3:after {display:block; width:40px; height:1px; margin:20px auto; content:''; background:#fff; opacity:.5}
.gallery .hoverBox .inner p {display:-webkit-box; color:#fff; max-height:69px; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis}
.gallery .bbsnewf5:hover .hoverBox {opacity:1}
.gallery .board_write {text-align: right;}
.brd_paging {display:none; text-align:center}
.brd_paging > b, .brd_paging > a {display:inline-block; width:38px; height:38px; line-height:36px; text-align:center; margin:0 -2px; border:1px solid #e8e8e8}
.brd_paging > b {color:#fff; border-color:#666; background:#666}
.brd_paging > a {color:#666}
.brd_paging > a:hover {color:#555; border-color:#cdcdcd; background:#f4f4f4}

@media screen and (max-width: 1280px) {
    /* 제품소개 스타일 */
    .gallery .hoverBox {padding-top:20%}
    .gallery_inner .hoverBox .inner h3 {font-size:18px}
    .gallery_inner .hoverBox .inner p {font-size:12px; max-height:63px}
}

@media screen and (max-width: 768px) {
    /* 제품소개 스타일 */
    .gallery > table {width:46% !important; margin:0 2% 20px 2%;}
    .gallery .hoverBox {padding:25% 20px 0 20px}
    /* 게시판 읽기 */
    .ico-board tbody td {padding:12px 10px}
    .prvThumbList table td {padding:2px !important}
    .prvThumbList > table {width:100%}
    .prvThumbList > table td table {width:33%}
    .prvThumbList img {width:100%; height:auto}


}

@media screen and (max-width: 640px) {
    .gallery > table {width:100% !important; margin: 0 0 20px 0; }
    /* 게시판 - 공지사항 */
    .brd_notice .att_title:first-child {display:none}
    .brd_notice .att_title:nth-child(3) {display:none}
    .brd_notice .att_title:nth-child(5) {display:none}
    .brd_notice .bbsno {display:none}
    .brd_notice .bbswriter {display:none}
    .brd_notice .bbsetc_view_count  {display:none}
    /* 게시판 - QNA */
    .brd_qna .att_title:first-child {display:none}
    .brd_qna .att_title:nth-child(4) {display:none}
    .brd_qna .att_title:nth-child(5) {display:none}
    .brd_qna .att_title:nth-child(6) {display:none}
    .brd_qna .bbsno {display:none}
    .brd_qna .bbsetc_dateof_write {display:none}
    .brd_qna .bbspublic_ox {display:none}
    /* 게시판 공통 */
    #ext_search {display: none;}
    .comment_txt input {width:25% !important; text-align:left !important; padding:10px !important}
}