@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* Reset */
html { height: 100%; }
body { margin: 0; padding: 0; font-size: 0.75em; height: 100%; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; word-break: keep-all; overflow-x: hidden; }
html,h1,h2,h3,h4,h5,h6,form,fieldset,img,dl,dt,dd,p { margin: 0; padding: 0; border: 0; }
h1,h2,h3,h4,h5,h6 { font-size: 1em; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
header ul,nav ul,footer ul { margin: 0; padding: 0; list-style: none; }
legend { position: absolute; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
label,input,button,select,img { vertical-align: middle; }
input,button { margin: 0; padding: 0; font-size: 1em; }
button,input[type='button'],input[type='submit'] { cursor: pointer; }
input[type='text'],input[type='password'],input[type='submit'],input[type='image'],button { border-radius: 0; -webkit-appearance: none; }
textarea,select { font-size: 1em; }
textarea { border-radius: 0; -webkit-appearance: none; resize: none; }
p { margin: 0; padding: 0; word-break: break-all; }
pre { overflow-x: scroll; font-size: 1.1em; }
a:link,a:visited { color: inherit; text-decoration: none; }
ul,ol,li { list-style: none; padding: 0; margin: 0; }
input,button,textarea,select { font-family: 'Noto Sans KR', sans-serif; outline: none; }
hr { content: ''; display: block; padding: 0; border: 0; margin: 0; }


/*safari input style reset*/
input[type='text'],input[type='password'],input[type='button'],input[type='submit'],textarea { -webkit-appearance: none; -webkit-border-radius: 0; }


/*scrollbar style*/
* {
    scrollbar-arrow-color: #e8e6e3;
    scrollbar-base-color: transparent;
    scrollbar-3dlight-color: transparent;
    scrollbar-darkshadow-color: transparent;
    scrollbar-face-color: #e8e6e3;
    scrollbar-highlight-color: transparent;
    scrollbar-shadow-color: transparent;
    scrollbar-track-color: transparent;
}
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { width: 4px; height: 4px; border-radius: 2px; box-sizing: border-box; background: #e8e6e3; }


/*drag style*/
::selection { background: #6da933; color: #fff; }
::-moz-selection { background: #6da933; color: #fff; }


/*layout style*/
body { background: rgb(225, 236, 223); }
.container { padding-top: 260px; box-sizing: border-box; }
.wrapper { max-width: 1680px; margin: 0 auto; }


/*header style*/
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; transition: .2s all ease-out; }

.hd { display: flex; justify-content: space-between; align-items: flex-start; position: relative; max-width: 1680px; height: 260px; margin: 0 auto; padding: 30px 0; box-sizing: border-box; transition: .2s all ease-out; background-color: rgb(225, 236, 223); opacity: 0.95; filter: alpha(opacity=95); }
.hd .hd-logo { font-size: 60px; font-weight: 700; color: #000; }
.hd .hd-logo img { width: 400px; }


/*gnb style*/
.gnb { display: flex; justify-content: flex-end; align-items: center; }
.gnb li:not(:last-child) { margin-right: 30px; }
.gnb a { font-size: 30px; font-weight: 400; color: rgba(11, 11, 12, 0.769); transition: .2s all ease-out; }
.gnb a:hover { color: #19f119; }


/*footer style*/
.footer { padding: 40px 0; box-sizing: border-box; }
.ft .company-info div { display: flex; justify-content: center; align-items: center; text-align: center; }
.ft .company-info div:last-child { margin-bottom: 0; }
.ft .company-info p { position: relative; margin-right: 12px; font-size: 13px; font-weight: 500; color: #727585; line-height: 22px; }
.ft .company-info p:not(:last-child):after { content: ''; display: block; position: absolute; top: calc(50% - 5px); right: -6px; width: 1px; height: 10px; background: #727585; }
.ft .company-info-en div { display: flex; justify-content: center; align-items: center; text-align: center; }
.ft .company-info-en div:last-child { margin-bottom: 0; }
.ft .company-info-en p { position: relative; margin-right: 12px; font-size: 13px; font-weight: 500; color: #727585; line-height: 22px; }
.ft .company-info-en p:not(:last-child):after { content: ''; display: block; position: absolute; top: calc(50% - 5px); right: -6px; width: 1px; height: 10px; background: #727585; }


/*thumbnail style*/
.thumb { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }


/*ICT*/
.top-message { padding: 80px 40px; box-sizing: border-box; font-size: 30px; font-weight: 400; color: #000; }
.top-message span { transition: .2s all ease-out; }
.top-message span:hover { color: #19f119; }
.top-message br { display: none; }

.works-group .top { margin-bottom: 20px; font-size: 15px; font-weight: 700; color: #888; text-align: right; }

.list-works li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 200px; }
.list-works .img-group { width: 1000px; height: 500px; margin-right: 100px; }
.list-works .txt-group { width: calc(100% - 1100px); }
.list-works .txt-group .tit { margin-bottom: 50px; font-size: 50px; font-weight: 700; color: #000; line-height: 72px; word-break: keep-all; }
.list-works .txt-group .txt { font-size: 30px; font-weight: 400; color: #000; line-height: 46px; word-break: keep-all; }

.list-works li:nth-child(even) { flex-direction: row-reverse; }
.list-works li:nth-child(even) .img-group { margin-left: 100px; margin-right: 0; }

#coffeeparklogo { height: 300px; width: auto; }

/*IT*/
.contact-group { padding: 400px 0 250px; box-sizing: border-box; text-align: center; }
.contact-group > .tit { margin-bottom: 80px; font-size: 50px; font-weight: 700; color: #131212; text-decoration: underline; }
.contact-group .txt-group .tit { display: block; margin-bottom: 20px; font-size: 25px; font-weight: 600; color: rgba(11, 11, 12, 0.769); transition: .2s all ease-out; }
.contact-group .txt-group .tit:hover { color: #19f119; }
.contact-group .txt-group .txt { font-size: 15px; font-weight: 400; color: #000; font-style: italic; }

.wrapper-scroller { width: 100%; overflow: hidden; }
.logo-scroll-wrapper {
	width: 100%;
	height: 200px; /* 높이를 고정 */
	background-color: #e6efe4;
	background-image: url('/img/Supported_by-removebg-preview.png');
	background-repeat: repeat-x;
	background-size: auto 150px;
	animation: scrollBackground 60s linear infinite;
}


@media only screen and (min-width:300px) and (max-width:600px) {
	/*layout style*/
	.container { padding: 10px; padding-top: 100px; box-sizing: border-box; }

	/*header style*/
	.hd { height: 100px; padding: 20px; box-sizing: border-box; }
	.hd .hd-logo { font-size: 24px; }
	.hd .hd-logo img { width: 100px; }

	/*gnb style*/
	.gnb li:not(:last-child) { margin-right: 20px; }
	.gnb a { font-size: 18px; }
	
	/*footer style*/
	.ft .company-info div { display: block; }
	.ft .company-info p { display: inline-block; margin-right: 8px; letter-spacing: -1px; text-align: left; }
	.ft .company-info-en div { display: block; }
	.ft .company-info-en p { display: inline-block; margin-right: 8px; font-size: 13px; letter-spacing: -1px; text-align: left; }
	#address { width: 92%; }
	
	/*ICT*/
	.top-message { padding: 40px 0; box-sizing: border-box; font-size: 20px; text-align: center; line-height: 28px; }
	.top-message br { display: block; }
	
	.list-works li { display: block; margin-bottom: 100px; }
	.list-works .img-group,
	.list-works li:nth-child(even) .img-group { width: 100%; height: 55.556vw; margin: 0; margin-bottom: 40px; }
	
	.list-works .txt-group { width: 100%; }
	.list-works .txt-group .tit { margin-bottom: 20px; font-size: 28px; line-height: 40px; }
	.list-works .txt-group .tit { margin-bottom: 20px; font-size: 28px; line-height: 40px; }
	.list-works .txt-group .txt { font-size: 18px; line-height: 26px; word-break: break-all; }
	
	#coffeeparklogo { height: auto; width: 240px; }

	/*IT*/
	.contact-group { padding: 200px 0 100px; box-sizing: border-box; }
	.contact-group > .tit { margin-bottom: 40px; font-size: 28px; }
	.contact-group .txt-group .tit { margin-bottom: 10px; font-size: 20px; }
	.contact-group .txt-group .txt { font-size: 14px; }

	.logo-scroll-wrapper {
		width: 500%;
		height: 200px; /* 높이를 고정 */
		background-color: #e6efe4;
		background-image: url('/img/Supported_by-removebg-preview.png');
		background-repeat: repeat-x;
		background-size: auto 150px;
		animation: scrollBackground 60s linear infinite;
	}

/*
	.logo-scroll-wrapper {
		width: 100%;
		height: 120px;
		background-color: #e6efe4;
		background-image: url('/img/Supported_by-removebg-preview.png');
		background-size: 90% auto;
		background-repeat: no-repeat;
		background-position: center;
		animation: none;
	}
*/
}


@media only screen and (min-width: 600px) and (max-width: 1680px) {
	/*layout style*/
	.wrapper, .hd, .footer { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
	
	
	/*ICT*/
	.list-works .img-group { width: 59.524vw; height: 29.762vw; margin-right: 5.952vw; }
	.list-works .txt-group { width: calc(100% - 65.476vw); }
	
	.list-works li:nth-child(even) .img-group { margin-left: 5.952vw; margin-right: 0; }
}


@media only screen and (min-width: 600px) and (max-width: 1280px) {
	/*layout style*/
	.container { padding-top: 100px; box-sizing: border-box; }
	
	
	/*header style*/
	.hd { height: 100px; padding: 20px; box-sizing: border-box; }
	.hd .hd-logo { font-size: 24px; }
	.hd .hd-logo img { width: 100px; }
	
	
	/*gnb style*/
	.gnb li:not(:last-child) { margin-right: 20px; }
	.gnb a { font-size: 18px; }
	
	/*footer style*/
	.ft .company-info div { display: block; }
	.ft .company-info p { display: inline-block; margin-right: 8px; letter-spacing: -0.3px; }
	.ft .company-info-en div { display: block; }
	.ft .company-info-en p { display: inline-block; margin-right: 8px; letter-spacing: -0.3px; }
	
	
	/*ICT*/
	.top-message { padding: 40px 0; box-sizing: border-box; font-size: 20px; text-align: center; line-height: 28px; }
	.top-message br { display: block; }
	
	.list-works li { display: block; margin-bottom: 100px; }
	.list-works .img-group,
	.list-works li:nth-child(even) .img-group { width: 100%; height: 55.556vw; margin: 0; margin-bottom: 40px; }
	
	.list-works .txt-group { width: 100%; }
	.list-works .txt-group .tit { margin-bottom: 20px; font-size: 28px; line-height: 40px; }
	.list-works .txt-group .txt { font-size: 18px; line-height: 26px; word-break: break-all; }
	
	
	/*IT*/
	.contact-group { padding: 200px 0 100px; box-sizing: border-box; }
	.contact-group > .tit { margin-bottom: 40px; font-size: 28px; }
	.contact-group .txt-group .tit { margin-bottom: 10px; font-size: 20px; }
	.contact-group .txt-group .txt { font-size: 14px; }
}

/* 좌우 2열: 왼쪽 텍스트, 오른쪽 이미지 */
.hero-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}

/* 왼쪽 텍스트는 남은 공간 사용 */
.txt-group{ flex:1; }

/* === 이미지 컨테이너: 여기 너비가 '실제 이미지 폭'이 됨 ===
   - 75%처럼 보이도록 '뷰포트 기반 폭 + 최대값'으로 컨트롤합니다. */
.img-block{
  position:relative;
  width:min(34vw, 400px);     /* 화면 기준으로 줄이고, 최대 560px */
  margin-left:auto;           /* 오른쪽 정렬 */
  box-sizing:border-box;
}

/* 이미지는 컨테이너를 100% 채움 */
.img-block img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* 캡션을 '이미지와 같은 폭'에서 오른쪽 정렬 (겹치지 않음) */
.img-caption{
  position:static;            /* 절대배치 제거 */
  width:100%;                 /* 이미지와 동일 폭 */
  margin-top:6px;             /* 이미지와 간격 */
  text-align:right;           /* 오른쪽 끝 맞춤 */
  font-size:16px;
  font-weight:600;
  color:#000;
}

/* 반응형: 모바일에서는 세로 스택 */
@media (max-width: 768px){
  .hero-row{ flex-direction:column; gap:24px; }
  .img-block{ width:min(90vw, 360px); margin:0 auto; }
  .img-caption{ font-size:14px; }
}