@charset "UTF-8";

/* mainVisual : en 스타일 상단 배너 (Molecules in Chromatography + 검색) */
#mainVisual{
	width:100%;
}

/* 분자 이미지 배너 */
#mainVisual .home-cont{
	background-image:linear-gradient(90deg, #373636 25%, #6a2f6a 60%, rgba(106,47,106,.74) 95%);
	padding-top:100px; /* 고정 헤더(100px) 아래로 내용 배치 */
}

#mainVisual .home-cont-tx{
	display:inline-block;
	margin-left:1.2rem;
	color:#eee;
	font-size:.85rem;
	font-weight:300;
}

#mainVisual .main-top{
	display:flex;
	align-items:center;
	gap:0 6%;
	padding:1rem 4rem;
	position:relative;
}

#mainVisual .main-top .molLink{
	margin-right:auto;
}

#mainVisual .main-top .top-img img{
	min-height:200px;
	max-height:200px;
	width:auto;
	display:block;
}

#mainVisual .main-top .top-img p{
	margin:8px 0 0;
	font-size:1rem;
	color:#eee;
	font-weight:300;
	text-align:center;
}

#mainVisual .main-top .top-title{
	position:absolute;
	left:calc(200px + 6rem);
	font-weight:700;
	font-size:2.6rem;
	color:#fff;
	line-height:1.15;
}

#mainVisual .main-top .top-title span{
	display:block;
	font-size:1.5rem;
	font-weight:400;
	color:#eee;
	letter-spacing:.02em;
}

/* 검색바 */
#mainVisual #search{
	width:100%;
}

#mainVisual .main-form{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:12px 6rem;
	background-color:#89294f;
	color:#f7e9f7;
	padding:1rem 4rem;
}

#mainVisual .main-form > p{
	font-size:1.05rem;
	margin:0;
}

#mainVisual .main-form a{
	color:#f7e9f7;
}

#mainVisual .main-form .main-input{
	display:flex;
	background:#fff;
	border:1px solid #333;
	min-width:300px;
}

#mainVisual .main-form .main-input input{
	flex:1;
	min-width:120px;
	padding:0 .6rem;
	border:none;
	border-radius:0;
	background:none;
	line-height:2.6rem;
	font-size:1rem;
	-webkit-appearance:none;
	outline:none;
}

#mainVisual .main-form .main-input #submit{
	width:3em;
	min-width:2.6em;
	border:none;
	background:var(--point-color) url(/kr/img/searchicon.png) no-repeat center/auto 45%;
	cursor:pointer;
	transition:.2s;
}

#mainVisual .main-form .main-input #submit:hover{
	background-color:#8f4a82;
}


/* mainQuick */

#mainQuick{
	padding-top:100px;
}

#mainQuick .quickList{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

#mainQuick .quickList li{
	width:calc(100% / 6);
}

#mainQuick .quickList li a{
	display:flex;
	flex-direction:column;
	width:100%;
	justify-content:center;
	gap:20px;
	align-items:center;
}

#mainQuick .quickList li a figure{
	width:100px;
	height:100px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	background-color:var(--gray01);
}

#mainQuick .quickList li a figure img{
	width:auto;
	height:45%;
}

#mainQuick .quickList li:first-child a figure img{
	height:62%;
}

#mainQuick .quickList li a .quickTit{
	font-size:1.125rem;
	font-weight:700;
	text-align:center;
}


/* intro */

#intro{
	position:relative;
}

#intro .introBg{
	position:absolute;
	right:0;
	top:70px;
	z-index:-1;
}

#intro .introBg p{
	font-size:12.5rem;
	font-weight:700;
	color:var(--gray01);
}

#intro .cont{
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#intro .cont .introTxt{
	font-size:1rem;
	line-height:1.5;
}

/* 문단 사이 여백 (이전에는 두 문단이 붙어 한 덩어리로 보였음) */
#intro .cont .introTxt + .introTxt{
	margin-top:1.2em;
}

#intro .cont .introTxt strong{
	font-size:inherit;
	font-weight:700;
}

#intro .cont .cont01 .btnbox{
	margin-top:40px;
}

#intro .cont .cont03{
	height:180px;
	width:calc(100% / 3);
	border-radius:90px;
	background:url(/kr/img/round_img.jpg?v=7) no-repeat;
	background-size:cover;
	background-position:center;
}

/* mainBoard */

#mainBoard .wrapper{
	display:flex;
	justify-content:space-between;
}

#mainBoard .contBoard{
	width:calc((100% - 60px) /2);
}

#mainBoard .contBoard .top{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}

#mainBoard .contBoard .cont ul{
	display:flex;
	flex-direction:column;
	gap:10px;
}

#mainBoard .contBoard .cont ul li a{
	background-color:var(--white);
	padding:20px;
	box-sizing:border-box;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#mainBoard .contBoard .cont .productList li a .cateTit{
	display:flex;
	align-items:center;
	width:calc(100% - 100px);
}

#mainBoard .contBoard .cont .productList li a .cateTit .cate{
	font-size:1rem;
	color:var(--point-color);
	font-weight:700;
	width:20%;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mainBoard .contBoard .cont .productList li a .cateTit .productName{
	width:80%;
	padding-left:20px;
	box-sizing:border-box;
	border-left:1px solid #ccc;
}

#mainBoard .contBoard .cont .productList li a .cateTit .productName img{
	width:auto;
	height:30px;
}

#mainBoard .contBoard .cont ul li a .listArr{
	width:30px;
	height:30px;
	border-radius:50%;
	background-color:var(--black02);
	display:flex;
	justify-content:center;
	align-items:center;
	transition:0.3s;
}

#mainBoard .contBoard .cont ul li a:hover .listArr{
	background-color:var(--point-color);
}

#mainBoard .contBoard .cont ul li a .listArr img{
	width:50%;
	height:auto;
}

#mainBoard .contBoard .cont .appList .appTit{
	width:calc(100% - 100px);
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px 10px;
}

#mainBoard .contBoard .cont .appList .appTit .listName{
	font-size:1.125rem;
	font-weight:700;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space: nowrap;
	max-width:100%;
}

#mainBoard .contBoard .cont .appList .appTit .appTag{
	display:inline-block;
	flex-shrink:0;
	font-size:0.8125rem;
	font-weight:700;
	color:#fffcfc;
	padding:4px 10px;
	border-radius:4px;
	white-space:nowrap;
	cursor:pointer;
}

#mainBoard .contBoard .cont .appList .appTit .appTag.color-intrada{ background-color:#d4a22e; }
#mainBoard .contBoard .cont .appList .appTit .appTag.color-cadenza{ background-color:#e83e7f; }
#mainBoard .contBoard .cont .appList .appTit .appTag.color-unison{ background-color:#6ba0bb; }
#mainBoard .contBoard .cont .appList .appTit .appTag.color-scherzo{ background-color:#876bbb; }
#mainBoard .contBoard .cont .appList .appTit .appTag.color-dacapo{ background-color:#82ab84; }
#mainBoard .contBoard .cont .appList .appTit .appTag.color-presto{ background-color:#ab8282; }
#mainBoard .contBoard .cont .appList .appTit .appTag.color-nardis{ background-color:#6b8fd7; }

#mainBoard .contBoard .cont .appList .appTit .listName .newsDate{
	display:inline-block;
	font-family:'Montserrat', sans-serif;
	font-size:0.75rem;
	font-weight:700;
	color:var(--point-color);
	background-color:var(--gray01);
	border-radius:20px;
	padding:4px 12px;
	margin-right:16px;
	vertical-align:middle;
}


/* support */
#support{
	background:url(/kr/img/sec05_bg.jpg) no-repeat;
	background-size:100% auto;
	background-position:center bottom;
}

#support .wrapper{
	display:flex;
	align-items:stretch;
	justify-content:space-between;

}

#support .contLeft{
	width:calc(50% - 60px);
	height:auto;
	background:url(/kr/img/sub/package.jpg?v=8) no-repeat;
	background-size:cover;
	background-position:center;
}

#support .contRight{
	width:50%;
	padding:60px 0;
}

#support .contRight .cont .supportBox{
	display:flex;
}

#support .contRight .cont .supportBox li{
	width:50%;
}

#support .contRight .cont .supportBox figure{
	height:100px;
}

/* SUPPORT 아이콘 : 2x 원본(144px)을 기존 아이콘과 동일한 크기로 표시.
   아래 미디어쿼리의 height:75% / width:70~80% 규칙이 이후에 오므로 모바일 동작은 유지됨 */
#support .contRight .cont .supportBox figure img{
	height:72px;
	width:72px;
}

#support .contRight .cont .supportBox .supportInfo h5{
	font-size:1.25rem;
	font-weight:700;
	word-break:keep-all;
}

#support .contRight .cont .supportBox .supportInfo .supportTxt{
	color:var(--gray02);
	font-size:1rem;
	line-height:1.5;
	margin-top:20px;
}

#support .contRight .cont .btnbox{
	margin-top:60px;
}

/* applicationNote */
#applicationNote{
	background:url(/kr/img/sec06_bg.jpg) no-repeat;
	background-position:center;
	background-size:cover;
}

#applicationNote .titbox{
	margin:0 auto;
}

#applicationNote .titbox .subtit,
#applicationNote .titbox h2,
#applicationNote .titbox h3{
	text-align:center;
}

/* 헤드라인 전체 축소 (인트로, 새로운 소식/주요 애플리케이션, SUPPORT, APPLICATION NOTE) */
#intro .titbox .tit,
#mainBoard .contBoard .titbox .tit,
#support .titbox .tit,
#applicationNote .titbox .tit{
	font-size:2.75rem;
}

@media screen and (max-width:1400px){
	#intro .titbox .tit,
	#mainBoard .contBoard .titbox .tit,
	#support .titbox .tit,
	#applicationNote .titbox .tit{
		font-size:2.5rem;
	}
}

@media screen and (max-width:1024px){
	#intro .titbox .tit,
	#mainBoard .contBoard .titbox .tit,
	#support .titbox .tit,
	#applicationNote .titbox .tit{
		font-size:2.05rem;
	}
}

@media screen and (max-width:460px){
	#intro .titbox .tit,
	#mainBoard .contBoard .titbox .tit,
	#support .titbox .tit,
	#applicationNote .titbox .tit{
		font-size:1.65rem;
	}
}

#applicationNote .btnbox{
	margin:60px auto 0 auto;
}

@media screen and (max-width:1500px){
	#intro .introBg p{
		font-size:10rem;
	}

	#intro .cont .cont03{
		height:150px;
	}

	#support .contRight{
		padding:40px 0;
	}
}

@media screen and (max-width:1200px){
	#mainVisual .mainVisualbox h2{
		font-size:3.666rem;
	}

	#mainVisual .mainVisualbox .subTit{
		font-size:1.066rem;
	}

	#mainBoard .contBoard{
		width:calc((100% - 40px) / 2);
	}

	#support .contLeft{
		width:calc(50% - 40px);
	}
}

@media screen and (max-width:1024px){
	#mainVisual .mainVisualbox h2{
		font-size:3.333rem;
	}

	#mainQuick {
		padding-top: 80px;
	}

	#mainQuick .quickList li a figure{
		width:80px;
		height:80px;
	}

	#mainQuick .quickList li a .quickTit{
		font-size:1rem;
	}

	#intro .introBg{
		top:60px;
	}

	#intro .introBg p {
        font-size: 7rem;
    }

	#intro .cont .introCont{
		width:50%;
	}

	#intro .cont .cont03{
		display:none;
	}

	 #mainBoard .contBoard {
        width: calc((100% - 20px) / 2);
    }

	#mainBoard .contBoard .cont ul li a{
		padding:15px;
	}

	#mainBoard .contBoard .cont ul li a .listArr{
		width:25px;
		height:25px;
	}

	#mainBoard .contBoard .cont ul li a .listArr img{
		width:45%;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .cate{
		width:25%;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .productName{
		width:75%;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .productName img{
		height:25px;
	}

	#mainBoard .contBoard .cont .appList .appTit .listName{
		font-size:1rem;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit{
		width:calc(100% - 80px);
	}

	#mainBoard .contBoard .cont .appList .appTit {
		width: calc(100% - 80px);
	}

	#support .contLeft{
		width:calc(50% - 20px);
	}

	#support .contRight{
		padding:20px 0;
	}

	#support .contRight .cont .supportBox figure{
		height:75px;
	}

	#support .contRight .cont .supportBox figure img{
		height:60px;
		width:60px;
	}

	#support .contRight .cont .supportBox .supportInfo h5{
		font-size:1.066rem;
	}

	#support .contRight .cont .supportBox .supportInfo .supportTxt{
		margin-top:10px;
	}

	#support .contRight .cont .btnbox{
		margin-top:40px;
	}

	#applicationNote .btnbox{
		margin:40px auto 0 auto;
	}
}

@media screen and (max-width:989px){
	.swiper-pagination-progressbar{
		width:250px !important;
	}

	.swiper_button{
		height:25px;
	}

	.swiper-button-next, .swiper-button-prev{
		width:25px !important;
		height:25px !important;
	}

	#mainBoard .wrapper{
		flex-direction:column;
		gap:100px;
	}

	#mainBoard .contBoard{
		width:100%;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .cate{
		width:20%;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .productName{
		width:85%;
	}

	#support .wrapper{
		flex-direction:column;
	}

	#support .contLeft{
		width:100%;
		height:400px;
	}

	#support .contRight{
		width:100%;
		padding:0;
		margin-top:60px;
	}
}

@media screen and (max-width:767px){
	#mainVisual .mainVisualbox .subTit{
		font-size:1rem;
	}

	#mainVisual .mainVisualbox h2{
		font-size:3.076rem;
	}

	#mainQuick {
        padding-top: 60px;
    }
	
	#mainQuick .quickList{
		flex-flow:wrap;
		justify-content:center;
		gap: 40px 0;
		align-items:flex-start;
	}

	#mainQuick .quickList li {
		width: calc(100% / 3);
	}

	#mainQuick .quickList li a figure {
		width: 70px;
		height: 70px;
	}

    #intro .introBg p {
        font-size: 6rem;
    }

	#intro .cont .cont01 .btnbox {
		margin-top: 25px;
	}

}

@media screen and (max-width:640px){
	#intro .cont{
		flex-flow:column-reverse;
	}

	#intro .cont .introCont{
		width:100%;
	}

	#intro .cont .introCont.cont01{
		margin-top:15px;
	}

	#intro .cont .introTxt{
		word-break:keep-all;
	}

	#intro .cont .introTxt br{
		display:none;
	}

	#intro .cont .cont01 .btnbox{
		margin-top:20px;
	}

	#intro .introBg {
        display:none;
    }

	#support{
		background:url(/kr/img/m_sec05_bg.jpg) no-repeat;
	}
}

@media screen and (max-width:460px){
	#mainVisual .mainVisualbox h2 {
        font-size: 2.692rem;
    }

	#mainVisual .mainVisualbox .subTit{
		margin-bottom:10px;
	}

	.swiper-pagination-progressbar {
        width: 200px !important;
		height: 3px !important;
    }

	#mainQuick {
        padding-top: 40px;
    }

	#mainQuick .quickList{
		gap:20px 0;
	}

	#intro .cont .introCont.cont01{
		margin-top:10px;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .cate{
		display:none;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .productName{
		width:100%;
		padding-left:0;
		border-left:0;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit{
		width:calc(100% - 40px);
	}

	#mainBoard .contBoard .cont .appList .appTit {
        width: calc(100% - 40px);
    }

	#mainBoard .contBoard .top{
		flex-direction:column;
		gap:20px;
		align-items:flex-start;
	}

	#mainBoard .wrapper{
		gap:60px;
	}

	#mainBoard .contBoard .cont .productList li a .cateTit .productName img {
        height: 20px;
    }

	#mainBoard .contBoard .cont ul li a .listArr{
		width:20px;
		height:20px;
	}

	#support .contLeft {
        width: 100%;
        height: 300px;
    }

	#support .contRight{
		margin-top:40px;
	}

	#support .contRight .cont .supportBox .supportInfo h5 {
        font-size: 1.23rem;
    }

	#support .contRight .cont .supportBox{
		flex-direction:column;
		gap:20px;
	}

	#support .contRight .cont .supportBox li{
		display:flex;
		gap:20px;
		width:100%;
	}

	#support .contRight .cont .supportBox figure{
		height:auto;
		display:flex;
		justify-content:center;
		align-items:center;
		width:20%;
	}

	#support .contRight .cont .supportBox .supportInfo{
		width:calc(80% - 20px);
	}

	#support .contRight .cont .supportBox .supportInfo .supportTxt{
		word-break:keep-all;
	}

	#support .contRight .cont .supportBox .supportInfo .supportTxt br{
		display:none;
	}

	#support .contRight .cont .btnbox {
        margin-top: 30px;
    }

	#applicationNote .btnbox {
        margin: 30px auto 0 auto;
    }

	#applicationNote .titbox h2 br,
	#applicationNote .titbox h3 br{
		display:none;
	}
}

@media screen and (max-width:375px){
	#mainVisual .mainVisualbox h2{
		font-size:2.307rem;
	}

	.swiper_button{
		height:20px;
		gap:15px;
	}

	.swiper-button-next, .swiper-button-prev{
		width:20px !important;
		height:20px !important;
	}

	.swiper-pagination-progressbar{
		width:160px !important;
	}

	#mainQuick .quickList li a{
		gap:10px;
	}

	#support .contLeft{
		height:280px;
	}

	/* 두 아이콘은 동일한 정사각 캔버스이므로 크기를 다르게 줄 이유가 없음
	   (이전에는 70% / 80% 로 달라서 제목 높이가 어긋났음) */
	#support .contRight .cont .supportBox figure img {
        height: 48px;
        width: 48px;
    }
}

/* ============================================================
   새로운 소식 / 주요 애플리케이션 : 탭 전환 UI (영문판과 동일 방식)
   ============================================================ */
#mainBoard .boardTabs{
	width:100%;
}

#mainBoard .boardTabs .top{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:20px;
	border-bottom:1px solid #e2e2e6;
	padding-bottom:0;
}

#mainBoard .tabBtns{
	display:flex;
	align-items:flex-end;
	gap:8px;
}

#mainBoard .tabBtn{
	display:flex;
	flex-direction:column;
	gap:6px;
	padding:0 28px 18px 28px;
	border:0;
	background:none;
	cursor:pointer;
	text-align:left;
	position:relative;
	color:#9a9aa2;
	transition:color .25s;
	font-family:inherit;
}

#mainBoard .tabBtn .tabEn{
	font-size:0.8125rem;
	font-weight:700;
	letter-spacing:.04em;
	color:inherit;
	opacity:.75;
}

#mainBoard .tabBtn .tabKo{
	font-size:1.875rem;
	font-weight:700;
	line-height:1.2;
	color:inherit;
	white-space:nowrap;
}

#mainBoard .tabBtn::after{
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:-1px;
	height:3px;
	background:var(--point-color);
	transform:scaleX(0);
	transition:transform .25s;
}

#mainBoard .tabBtn:hover{
	color:#5b5b63;
}

#mainBoard .tabBtn.active{
	color:var(--black02);
}

#mainBoard .tabBtn.active .tabEn{
	color:var(--point-color);
	opacity:1;
}

#mainBoard .tabBtn.active::after{
	transform:scaleX(1);
}

#mainBoard .tabPanel{
	display:none;
	margin-top:40px;
}

#mainBoard .tabPanel.active{
	display:block;
}

#mainBoard .tabPanel .appList{
	max-height:460px;
	overflow-y:auto;
	padding-right:6px;
}

/* 화살표 아이콘을 없앴으므로 제목이 전체 폭을 사용 */
#mainBoard .boardTabs .cont .appList .appTit{
	width:100%;
}

/* 화살표 대신 호버로 클릭 가능함을 알림 */
#mainBoard .tabPanel .appList li a{
	border-left:3px solid transparent;
	padding-left:24px;
	transition:box-shadow .25s, border-color .25s, transform .25s;
}

#mainBoard .tabPanel .appList li a:hover{
	border-left-color:var(--point-color);
	box-shadow:0 4px 14px rgba(0,0,0,.07);
	transform:translateX(3px);
}

#mainBoard .tabPanel .appList li a:hover .listName{
	color:var(--point-color);
}

#mainBoard .tabPanel .appList li a .listName{
	transition:color .25s;
}

@media screen and (max-width:1024px){
	#mainBoard .tabBtn{
		padding:0 16px 14px 16px;
	}

	#mainBoard .tabBtn .tabKo{
		font-size:1.5rem;
	}
}

@media screen and (max-width:640px){
	#mainBoard .boardTabs .top{
		flex-direction:column;
		align-items:flex-start;
		gap:14px;
	}

	#mainBoard .tabBtns{
		width:100%;
	}

	#mainBoard .tabBtn{
		flex:1;
		align-items:flex-start;
		padding:0 6px 12px 6px;
	}

	#mainBoard .tabBtn .tabEn{
		font-size:0.6875rem;
	}

	#mainBoard .tabBtn .tabKo{
		font-size:1.125rem;
		white-space:normal;
	}

	#mainBoard .boardTabs .top .btnbox{
		align-self:flex-end;
		margin-top:-42px;
	}

	#mainBoard .tabPanel{
		margin-top:24px;
	}

	#mainBoard .tabPanel .appList{
		max-height:380px;
	}
}

/* 메인 홈 상하 여백 축소 (공용 pt160/pb160/pt200/pb200 유틸리티는 다른 페이지에도 쓰이므로
   여기서는 홈 섹션 id에만 덮어써서 홈 화면만 좁힘) */
#intro,
#mainBoard,
#support{
	padding-top:100px;
	padding-bottom:100px;
}

#applicationNote{
	padding-top:130px;
	padding-bottom:130px;
}

@media screen and (max-width:1240px){
	#intro,
	#mainBoard,
	#support{
		padding-top:80px;
		padding-bottom:80px;
	}

	#applicationNote{
		padding-top:100px;
		padding-bottom:100px;
	}
}

@media screen and (max-width:767px){
	#intro,
	#mainBoard,
	#support{
		padding-top:60px;
		padding-bottom:60px;
	}

	#applicationNote{
		padding-top:70px;
		padding-bottom:70px;
	}
}

@media screen and (max-width:640px){
	#intro,
	#mainBoard,
	#support{
		padding-top:50px;
		padding-bottom:50px;
	}

	#applicationNote{
		padding-top:55px;
		padding-bottom:55px;
	}
}