/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* unset은 속성을 상속 받으면 부모 요소의 속성값을 따르고, 직접 속성값을 설정할 때는 초기값으로 돌아간다는 의미. 뭔말이야.... revert는 상속을 고려하며, 브라우저에 의해 제공된 기본값으로 속성을 초기화한다. revert 값의 사용은 특히 CSS의 초기값을 다시 설정하거나 사용자 에이전트의 스타일을 되돌리고자 할 때 유용하다. 그러니까 사용자측에서 설정한 스타일을 초기화한다는 의미일까.. where는 여러요소를 묶어서 선택자로 지정할 수 있다. */ /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* text-size-adjust - iOS에서는 사용자가 화면을 확대하거나 축소할 때 텍스트 크기를 자동으로 조정하는데, text-size-adjust를 사용하여 이 동작을 제어할 수 있다. 속성값을 none으로 설정하면 브라우저가 자체적으로 텍스트의 사이즈를 조절하지 않는다는 의미이고 이는 사용자에게 일정하고 일관된 텍스트 사이즈를 제공할 수 있다는 의미이다. */ /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* border-collapse는 HTML의 요소에서 테이블의 셀 사이의 테두리(border) 모델을 어떻게 처리할지를 지정하는 CSS 속성이다. collapse: 셀들의 테두리를 합쳐서 단일한 테두리로 표현합니다. 셀 사이의 간격이 없어지고, 테이블이 더 밀접하게 보입니다. separate: 각 셀이 독립된 테두리를 가지며 서로 간격이 있습니다. 이는 각 셀의 테두리가 분리되어 있음을 의미합니다. border-collapse 속성을 사용하면 테이블 디자인을 세밀하게 조절할 수 있습니다. 일반적으로 대부분의 디자인에서는 collapse를 사용하여 테이블 테두리를 더 깔끔하게 표현하는 것이 일반적입니다. */ /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* 이건 사용자가 브라우저상에서 텍스트부분을 드래그하여 선택할 수 있느냐의 의미이다. auto는 허용하는거고 none은 드래그방지, 선택불가를 의미한다. 일반적으로는 auto가 기본 디폴트인데 예를들어 버튼, 아이콘등의 ui요소에서 마우스를 올리거나 드래그, 클릭 등등할때 함께 있는 텍스트가 선택되는게 싫으니까 이거 none으로 따로 꼭 넣어줘야겠다... */ /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* meter element는 게이지나 진행률막대등에 쓰이는 그래픽을 말한다. 자세한건 패스. */ /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('../font/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'PretendardJP Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('PretendardJP Variable'), url('../font/PretendardJPVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'AvenueX'; src:local('Avenue X'), url('../font/Avenue\ X.otf'); } :root { scroll-behavior: smooth; font-size:62.5%; font-family: 'PretendardJP Variable'; --grid-template-columns : repeat(6,1fr); --mobile-grid-template-columns : repeat(4,1fr); --grid-column-gap-12 : 1.2rem; --grid-column-gap-14 : 1.4rem; --grid-column-gap-8 : 0.8rem; --container-padding-24 : 2.4rem; --container-padding-32 : 3.2rem; --container-padding-21 : 2.1rem; --container-padding-15 : 1.5rem; --button-width-120:12rem; --button-height-38 :3.8rem; --heading-line-width-85 :8.5rem; --headihg-line-padding-25 :2.5rem; --heading-font-size-16:1.6rem; --heading-line-width-41:4.1rem; --heading-line-padding-18 :1.8rem; --heading-font-size-14 :1.4rem; --heading-line-width-40 :4rem; --heading-line-padding-12:1.2rem; --section-margin-140 : clamp(11rem,11vw,14rem); --section-margin-118 :11.8rem; --section-margin-mobile : clamp(10rem, 30.23vw, 13rem); --heading-margin-mobile: clamp(5.6rem, 15vw,6.4rem); --color-gradation :linear-gradient(90deg, #0F122D 6%, #0B242E 16%, #035333 36%, #006535 43%, #046A33 70%, #0E182D 98%, #0F122D 100%); --color-kizumi : linear-gradient(90deg,#196D00,#0077B6 ); --color-black :#000; --color-base :#FFFAF0; --color-gray : #F5F5F5; --color-green: #006536; --color-navy:#0C102A; --arrow-mail-width-desktop : 1.56rem; --arrow-mail-width-22 : 2.2rem; --arrow-iconbox-size-30 : 3rem; --arrow-icon-size-width : 2.1rem; --arrow-icon-size-height: 1.3rem; --table-contact-height-60 :6rem; --table-contact-height-48 :4.8rem; --table-document-height-40 :4rem; --table-document-height-48 :4.8rem; } @media screen and (min-width: 0\0) { /* IE 9, IE 10, IE 11 */ :root, html { font-size: 10px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE 10, IE 11 */ :root, html { font-size: 10px; } } body{ background-color: #F9F9F9; box-sizing: border-box; user-select: none; overflow-x:hidden; overflow-y:scroll; height:fit-content; }