@import url("webfont.css");
@import url("sub-page.css");
@import url("subpagetab.css");
@import url("menu-style.css");
@import url("pmc-process.css");

/* RESET CSS */

html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
img, fieldset {border:0px;}
table {border-collapse:collapse;}
ul, ol, li {list-style:none;}
address, em {font-style:normal;}
li img, object {vertical-align:top;}
input, select, textarea, form img {vertical-align:middle;}
a {outline:0; text-decoration:none; border:none; color:#000;}
.a:hover {text-decoration:underline;}
a:focus {outline:0;}

body {font-family: 'Noto Sans Korean', serif; font-weight:400; }

/* mobile nav ui */
.mnav {position:absolute; right:20px; top:20px;}
/*.sidenav-brand {background:#003e96!important; border-bottom:#003e96!important;}
*/.font-black {color:#000!important;}

.row [class*='col-'] {background-clip: content-box;}

.header {width:100%; height:100px;}
.header .logo {padding-top:25px; float:left;}
.header .logo img {
	width: 200px;
}
.header #gnb {padding-top:22px; float:right;}
.header #gnb ul li {float:left; padding-left:60px;}
.header #gnb ul li a {font-size:16px;}
.header .search-box {float:right; padding-top:50px;}

.jumbo-line {
	height:10px;
	/*background:url(../images/jumbo-line.png)no-repeat center center;*/
	background-size:cover;
}
/* #visual .jumbotron {height:350px; background:url(../images/jumbo.jpg)no-repeat center center; background-size:cover;} */


.visual {height:250px; background:url(../images/slide-001.jpg) no-repeat; background-size:cover;}
.visual .typo h4 {color:#fff; font-size:32px; font-weight:100; margin-top:50px;}
.visual .typo p {font-family: 'Noto Serif', serif; color:#fff; font-size:17px; font-weight:300; margin-top:5px;}
.visual .carousel {height:250px;}
.visual .carousel-caption {position:static; text-shadow:none; padding-top:100px; font-size:32px;} 
 
/*new*/
/*.visual-top {height:480px; background:url(../images/background_img_top.png) no-repeat; background-size: 480px; background-position: 44% 0%;}*/

.flex-row {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.visual-top {
	/*height: 800px;*/
	background:url(../images/background_img_top.png) no-repeat;
	background-size: cover;
	background-position: 0% 50%;
}

/*clip-path*/
/*.visual-top {
	background: url(../images/img_gradient.jpg) no-repeat;
    clip-path: polygon(57% 0%, 100% 0%, 100% 100%, 45% 100%);
    background-size: 2700px;
    background-position: 33% 69%;
}
*/
.typo.container {
	height: 380px;
}

h1.title {
	font-size: 33px;
    line-height: 1.5;
    padding-top: 25px;
    font-weight: normal;
    width: 460px;
}

.mobile-title-left, .mobile-title-right {
	display: none;
}



.visual-solutions {
	color: #fff;
	font-size: 15px;
	/*background-image: linear-gradient(119deg, #00A2E9 41%, #214195 40% 65%, #9C17BC 65% 100%);*/
}



.visual-solutions .items {
	width: 250px;
}


.visual-solutions a {
	color: #fff;
}

.visual-solutions .solutionBox .box-title {
	font-size: 25px;
	margin: 33px 0;

}


.visual-solutions .solutionBox .box-title p {
	font-size: 15px;
	position: absolute;
}



#body-content .flex-row {
	    padding: 50px 0 0 0px;
}

#body-content .gray-line {
    /*margin: 0px 0px 10px 0px;*/
    height: 1px;
    background-color: #e6e6e6;
}
#body-content .journals-box {
	flex-basis: 25%;
}
#body-content .journals-number {
    font-size: 60px;
    margin-top: 10px;
    /*font-weight: 700;*/
}
#body-content .journals-content {
	width: 280px;
	height: 300px;
	padding: 55px 0 0 50px;
}
#body-content .x-logo {
	flex-basis: 50%;
	text-align: center;
}
#body-content .x-logo svg {
	max-width: 400px;
	width: 100%
}

img.hub-logo {
	width: 80%;
	margin-left: 2px;
}

img.PMC-logo {
	width: 86%; 
}

img.press-logo {
	width: 78%;
	margin-left: -5px;
}

img.EM-logo {
	width: 80%;
	margin-left: -13px; 
}



.body-bottom {
	width: 100%;
    padding-bottom: 36px;
    background-color: #F8F8F8;
}
.body-bottom .row {
	margin-top: 25px;
}
.body-bottom .content-box {
	border: none!important;
}

.body-bottom .content-box .title-img {
	width:100%;
	height:200px;
	border: 1px solid #cbcaca!important;
}

.body-bottom .content-box .box-desc1 {
    padding: 10px 0 0 0!important;
    border: none!important;
}

.body-bottom .content-box .box-desc1 .title {
    font-size: 15px!important;
}

.body-bottom .content-box .box-desc1 .date {
    font-size: 12px;
    color: #ababab;
    margin-top: 5px;
}

.body-bottom .masonry-column {
	overflow: hidden;
}

.body-bottom .moreButton {
	text-align: center;
	margin-top: 20px;

}
.body-bottom .moreButton div {
	background-color: #00A2E9;
    padding: 10px 20px;
    width: 160px;
    color: #fff;
    display: inline-block;
}


.footer-area {
	background-color: #DDDDDD!important;
	padding: 40px 0;
	color: #767676;
}
.footer-area a {
	color: #767676;
}

.footer-area .gray-line {
	border-top: 1px solid #B4B4B4!important;
	margin: 10px 0!important;
}

.footer-left {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.footer-left > div:nth-of-type(4) {
	padding-bottom: 20px;
}
.logo-img, .empty-area {
	flex-basis: 30%;
	/*margin-bottom: 12px;*/
}
.logo-img img {
	width: 100%;
	max-width: 105px;
	padding-right: 20px;
	/*margin-bottom: 14px;*/
}

.footer-menu, .footer-left > div:nth-of-type(4) {
	flex-basis: 70%;
	padding-right: 40px;
}
/*.footer-pc .footer-menu {
	padding-left: 17px;
}*/
.footer-menu {
	display: block;
    font-size: 16px;
}
.footer-menu a {
	display: block;
	margin-bottom: 12px;
    font-size: 16px;
}
/* .footer-area hr {
	border-top: 1px solid #B4B4B4!important;
} */
/* .footer-area .disc {
	color: #4a4a4a!important;
	line-height: 1.5!important;
	font-weight: normal!important;
	font-size: 14px!important;
} */

.banner-zone .adBanner {
	display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.banner-zone .adBanner .banner-link {
	display: block;
	margin-bottom: 34px;
    font-size: 16px;
}



#body-solutions {padding-bottom: 40px; }
#body-solutions h1 {display:block; margin-top: 30px; margin-bottom: 22px; font-size: 22px; color: #01124d; font-family: 'Noto Serif', serif;}
#body-solutions .solutionBox {height:250px; padding: 5px;}
#body-solutions .box1 {height:340px; background:url(../images/background_img_p.png)no-repeat center center; background-size:cover;}
#body-solutions .box2 {height:340px; background:url(../images/background_img_o.png)no-repeat center center; background-size:cover;}
#body-solutions .box3 {height:340px; background:url(../images/background_img_g.png)no-repeat center center; background-size:cover;}

#body-solutions .solutionBox {position:relative;}
#body-solutions .solutionBox .box-title {position:absolute; top:40px; right:45px; color:#fff; font-size:18px; font-weight:300; letter-spacing:1px;}
#body-solutions .solutionBox .pragraph-box {position:absolute; top:148px; left:20px;}
#body-solutions .solutionBox .box-title-xmlinkpress {position:absolute; top:65px; right:97px; width:100px; height:80px; /*background:url(../images/xmlinkpress-logo-2024.png)no-repeat;*/}
#body-solutions .solutionBox p {color:#fff; font-weight: 200; font-size:13px;}
#body-solutions .solutionBox p a {color:#fff;}

#body-solutions .solutionBox-s {height:250px; padding: 5px;}
#body-solutions .solutionBox-s .box-title {color: white; font-size: 16px; font-weight: 300;}
#body-solutions .solutionBox-s p {color: white; font-weight: 200; font-size: 15px;}
#body-solutions .solutionBox-s p a {color: white;}
#body-solutions .solutionBox-s p img {width: 130px; margin-top: 5px;}

#body-solutions .white-line {margin: 15px 0px 5px 0px; height: 1px; background-color: #ffffff;}

#body-journals {width:100%; padding-bottom: 36px; background-color: #eeeeee; }
#body-journals h1 {display:block; margin: 30px 0px 22px 0px; font-size: 22px; color: #01124d; font-family: 'Noto Serif', serif;}
#body-journals .background-box {width: 100%; border-radius: 3px; background-color: #ffffff; box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15); padding: 0% 3% 0% 3%;}
#body-journals .journals-content {width: 19%; margin: 0% 3% 2% 3%; text-align: center; float: left;}
#body-journals .journals-img {line-height:87px;}
#body-journals .journals-img img {vertical-align: middle;}
#body-journals .gray-line {margin: 0px 0px 10px 0px; height: 1px; background-color: #e6e6e6;}
#body-journals .journals-number {font-size: 36px; font-weight: 700;}
#body-journals p {font-weight:300; font-size: 14px;}

#body-news {width:100%; overflow:hidden;}
#body-news h1 {display:block; margin-top: 30px; margin-bottom: 22px; font-size: 22px; color: #01124d; font-family: 'Noto Serif', serif;}
#body-news .content-box {margin-top:30px; border:1px solid #E6E6E6;}



#body-news .content-box .title-img {width:100%; height:200px;}

#body-news .content-box .box-desc1 {padding: 20px 20px;     border-top: 1px solid #E6E6E6;}
#body-news .content-box .box-desc1 .title {font-size:20px; color:#555; word-break:keep-all;}
#body-news .content-box .box-desc2 {position:relative; padding-top:20px; padding-bottom:20px; border-top:1px solid #E6E6E6;}
#body-news .content-box .box-desc2 .date {padding-left:30px; padding-right:30px; font-size:14px; color:#777;}
#body-news .content-box .box-desc2 .more {position:absolute; right:15px; top:20px;}


#body-news .content-box .box-desc3 {padding: 10px 10px; background-color: #F8F8F8}
#body-news .content-box .box-desc3 .title-notice {font-size:14px; color:#555; word-break:keep-all;}

#body-news .content-box .box-desc4 {position:relative; padding-top:10px; padding-bottom:10px; border-top:1px solid #E6E6E6;}
#body-news .content-box .box-desc4 .date {padding-left:30px; padding-right:30px; font-size:14px; color:#777; text-align: right;}

.footer {margin-top: 40px; border-top: 1px solid #ccc;}
.footer .row>div>.f-banner {padding:3.5%; border: 1px solid #ccc; text-align: center;
    border-radius: 5px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); height: 44px;}
.footer .small-banner-1 {margin-top: 10px; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
.footer .small-banner-1>div>div {margin-top: 10px;}
.footer .small-banner-2 {margin-top: 10px; margin-bottom: 5px; padding-bottom: 20px; /* border-bottom: 1px solid #ccc; */}
.footer .small-banner-2>div>div>div {margin-top: 10px;}
.footer .footer-bottom {font-size: 12px; margin-bottom: 5px;}
.footer .footer-bottom a {color: black;}
.footer .footer-bottom a:hover {color: black; text-decoration: none;}
.footer .footer-bottom .help-link {margin-left: 5px;}

#Copyright-area {width:100%; background-color: #eeeeee;}
#Copyright-area .disc {
	margin-top: 16px;
	font-size: 14px;
	line-height:1.5;
}
#Copyright-area .address {margin-top:12px; margin-bottom: 28px; font-size: 12px; line-height: 1.5; text-align: left; color: #4a4a4a;}

/*em*/
.em-process {
	margin-left: 10px;
}

.em-process div:nth-child(odd) {
	margin-top: 30px;
}



.em-process a {
	margin-left: 10px;
}

.em-process a:nth-child(even) {
	margin-left: 15px;
}

.em-process-img {
	margin: 10px 0 10px 0;
}

.em-process-img img {
	border: 1px solid #666;
	padding: 10px;
	margin-right: 10px;
	margin-top: 15px;
}




@media (max-width: 1199px) {
	
	#body-solutions .solutionBox .box-title {top:50px; right:10px;}
	#body-solutions .solutionBox .box-title-xmlinkpress {position:absolute; top:30px; right:10px;}	
	.visual-solutions .items {
		width: auto;
	}
	#body-content .x-logo {
		flex-basis: 35%;
	}
	.banner-zone .adBanner .banner img {
	    max-height: 27px;
	}

}


@media (min-width: 993px) {
	
	#body-journals .journals-img img {width: 95%;}
	.footer .row>div>.f-banner img {margin-left: auto; margin-right: auto;}


}

@media (max-width: 992px) {

	#body-journals .journals-img img {width: 100%;}
	#body-journals .journals-number {font-size: 30px;}
	#body-journals p {font-size: 12px;}
	#body-solutions .box2 {margin-bottom:15px;}
	.footer .row>div>.f-banner img {margin-left: auto; margin-right: auto;}
	.banner-zone {
		display: none;
	}
	#body-content .x-logo {
		flex-basis: 20%;
	}
	.footer-mobile {
		display: block;
	}
	.footer-pc {
		display: none;
	}
	.logo-img, .footer-menu {
		flex-basis: 50%;
		padding-right: 0px;
	}

	.empty-area {
		flex-basis: 0%;
	}
	.footer-left > div:nth-of-type(4) {
		flex-basis: 100%;
		padding-right: 0px;
	}
}

@media (max-width: 767px) {
	
	.header {height:80px;}
	.header .logo {padding-top:27px;}
	.header .logo img {
	    width: 150px;
	}
	.header h1 img {width:70%;}
	.mnav {top:30px;}
	#body-solutions .box1,#body-solutions .box2,#body-solutions .box4 {margin-bottom:15px;}
	#body-journals .journals-content {width: 27%; height:195px;}
	#body-journals .background-box {width: 100%; overflow:hidden;}

	.visual-top {
		background:url(../images/background_img_gradient.png) no-repeat;
		background-size: 1500px;
    	background-position: 0% 0%;
	}
	.visual-top .typo.container {
		height: 250px;
    	position: relative;
	}
	.visual-top h1.title, .box-title-sub {
		display: none;
	}
	.visual-top .mobile-title-left, .visual-top .mobile-title-right {
		display: block;
		font-size: 20px;
    	line-height: 1.6;
    	width: 44%;
	}

	.visual-top .mobile-title-right {
    	color: #fff;
    	text-align: right;
		position: absolute;
    	bottom: 10px;
    	right: 15px;
	}

	.visual-solutions {
		height: auto!important;
		padding: 0;
		text-align: center;

	}
	.visual-solutions .flex-row {
		flex-direction: column;
	}
	.visual-solutions .flex-row .items {
    	width: auto;
	}
	.visual-solutions .flex-row .items:nth-of-type(1) {
    	background: #00A2E9;
	}
	.visual-solutions .flex-row .items:nth-of-type(2) {
    	background: #214195;
	}
	.visual-solutions .flex-row .items:nth-of-type(3) {
    	background: #9C17BC;
	}
	.visual-solutions .flex-row .items .box-title {
    	font-size: 23px;
   		margin: 20px 0;
	}
	.visual-solutions .pragraph-box {
		display: none;
	}

	h1.title {
		text-align: center;
		width: auto;
		font-size: 20px;
	    margin: 20px;
	    padding: 0;
	}
	#body-content .content {
		display: flex;
	}
	#body-content .flex-row {
		padding: 10px 0 30px 0;
		flex-basis: 70%
	}
	#body-content .mobile-x-logo {
		flex-basis: 30%;
		background:url(../images/x-logo.png) no-repeat;
		background-size: cover;
		background-position: 0% 0%;
	}
	#body-content .journals-box {
		flex-basis: 100%;
	}
	#body-content .journals-content {
		height: auto;
		width: 100%;
		padding: 0px;

	}
	#body-content .journals-content a {
		display: flex;
    	flex-direction: row-reverse;
    	justify-content: flex-end;
	}
	#body-content .journals-content .journals-number {
		margin-top: 0px;
		font-size: 40px;
		margin-right: 10px;
		width: 45px;
	}
	#body-content .journals-content .journals-img {
		line-height: 52px;
	}
	img.hub-logo {
		width: 120px;
	}

	img.PMC-logo {
		width: 120px; 
	}

	img.press-logo {
		width: 135px;
		margin: 0px;
	}

	img.EM-logo {
		width: 150px;
		margin-left: -6px; 
	}
	#body-content .gray-line {
		margin: 10px 0 20px 0;
		display: block!important;
	}
	#body-content .x-logo {
	    display: none;
	}
	#body-news .content-box {
		margin: 0px;
		padding: 15px 0 15px 0;
		border-bottom: 1px solid #D1D1D1!important;
		display: flex;
    	justify-content: space-between;
	}
	#body-news .content-box:last-child {
		border: none!important;
	}
	#body-news .content-box .box-desc1 {
		padding: 0px!important;
	}
	#body-news .content-box .title-img {
		height: 150px;
	}
	#body-news .content-box > div {
		flex-basis: 49%;
	}



	.footer-menu a {
	    width: 50%;

	}
	.footer-right {
		margin-top: 20px;
	}

	/*.banner-zone .adBanner .banner {
    	flex-basis: 33%;
	}*/


}