/* A A A : A : A : A : */ #Full_Division_TopText { width : 100%; height : auto; position : relative; display : flex; align-items : center; justify-content : center; font-size : min(1.6vw,20px); font-family : "Noto Sans Kr"; text-align : center; } #Full_Division_TopText [data-back-wrap] { width : 100%; height : 100%; position : absolute; top : 0; left : 0; z-index : 0; overflow : hidden;} #Full_Division_TopText [data-back-wrap] [data-back-type] { width : 100%; height : 100%; } #Full_Division_TopText [data-back-wrap] [data-back-type] [data-back-filter] { width : 100%; height : 100%; position : absolute; top : 0; left : 0;} #Full_Division_TopText .onlyFold { display : none;} #Full_Division_TopText .topTextBox { width : 100%; height : auto; position : absolute; top : 0; left : 0; display : flex; align-items : center; justify-content : space-between; z-index : 1;} #Full_Division_TopText .topTextBox .topText { font-size : clamp(8.5em,14.2vw,12.5em); font-weight : 800; color : #EEEFEF; line-height : 0.65em; letter-spacing : -0.05em; margin-left : -0.08em; z-index : 0; } #Full_Division_TopText .topTextBox .topText.A { opacity : .5; } #Full_Division_TopText .sectionWrap { width : 95%; height : 100%; display : flex; max-width : 1450px; position : relative; z-index : 2; padding : 6.5em 0 4em; align-items : center; justify-content : center; flex-direction : column;} #Full_Division_TopText .sectionWrap .topTitBox { width : 100%; height : auto; } #Full_Division_TopText .sectionWrap .topTitBox .tit { font-size : 1.7em; font-weight : 700; line-height : 1em; margin-bottom : 0.3em; } #Full_Division_TopText .sectionWrap .topTitBox .subTit { font-size : 1.5em; font-weight : 500; line-height : 1em; } #Full_Division_TopText .sectionWrap .topTitBox .subTit span { font-size : inherit; font-weight : inherit; line-height : inherit; background : #FFAF00; display : inline-block; padding : 0.1em 0.1em 0.15em; } #Full_Division_TopText .sectionWrap .subTitBox { width : 100%; height : auto; } #Full_Division_TopText .sectionWrap .subTitBox .tit { font-size : 1.5em; font-weight : 700; line-height : 1em; margin-bottom : 0.3em; margin-top : 1.6em; } #Full_Division_TopText .sectionWrap .subTitBox .subTit { font-size : 1.2em; font-weight : 400; line-height : 1em; margin-top : 1.5em; word-break : keep-all; } #Full_Division_TopText .arrow { width : 100%; height : auto; } #Full_Division_TopText .arrow svg { font-size : 2.2em; color : #BCBCBD; transform : rotate(90deg); margin : 0.5em 0; } #Full_Division_TopText .arrow.none svg { font-size : 2.2em; color : #BCBCBD; transform : rotate(90deg); margin : 0.6em 0; opacity : 0; pointer-events : none;} #Full_Division_TopText .link { font-size : 1.6em; color : #FFAF00; background : #000; border-radius : 35px; line-height : 1em; padding : 0.35em 1.2em; display : inline-block; font-weight : 800; border : 2px solid #000; transition : .3s; } #Full_Division_TopText .link:hover { color : #000; background : #fff; transition : .3s; } #Full_Division_TopText .imgWrap { width : 100%; height : auto; display : grid; grid-template-columns : repeat(4,24%); gap : 10px 0; justify-content : space-between; } #Full_Division_TopText .imgWrap .imgBox { width : 100%; height : auto; position : relative; aspect-ratio : 1 / 0.77;} #Full_Division_TopText .imgWrap .imgBox img { width : 100%; height : 100%; position : absolute; top : 0; left : 0; object-fit : cover;} #Full_Division_TopText[view-mode="tab"] { font-size : 18px; background: -webkit-linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #Full_Division_TopText[view-mode="tab"] .topTextBox .topText { font-size : clamp(6em, 13.5vw, 8em); } #Full_Division_TopText[view-mode="tab"] .sectionWrap { padding : 4em 0 3em;} #Full_Division_TopText[view-mode="tab"] .arrow svg { margin : 0.4em 0;} #Full_Division_TopText[view-mode="tab"] .arrow.none svg { margin : 0.2em 0;} #Full_Division_TopText[view-mode="tab"] .imgWrap .imgBox { aspect-ratio : 1 / 0.6;} #Full_Division_TopText[view-mode="tab"] .imgWrap { grid-template-columns : repeat(2,49%); max-width : 700px; margin : 0 auto; } #Full_Division_TopText[view-mode="mobile"] { font-size : 11.52px; background: -webkit-linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #Full_Division_TopText[view-mode="mobile"] .topTextBox { flex-direction : column; } #Full_Division_TopText[view-mode="mobile"] .topTextBox .topText { width : 100%; font-size : 7em; line-height : 0.6em; } #Full_Division_TopText[view-mode="mobile"] .topTextBox .topText.A { text-align : left; margin-left : -0.2em;} #Full_Division_TopText[view-mode="mobile"] .topTextBox .topText.B { text-align : right; margin-top : -0.1em; margin-left : 0.1em; mix-blend-mode: multiply;}} #Full_Division_TopText[view-mode="mobile"] .sectionWrap .topTitBox .tit { font-size : 1.7em; margin-bottom : 0.4em;} #Full_Division_TopText[view-mode="mobile"] .sectionWrap .topTitBox .subTit { font-size : 1.5em;} #Full_Division_TopText[view-mode="mobile"] .sectionWrap .subTitBox .tit { font-size : 1.5em; margin-top : 1.2em;} #Full_Division_TopText[view-mode="mobile"] .sectionWrap .subTitBox .subTit { font-size : min(1.4em,18px); line-height: 1.3em;} #Full_Division_TopText[view-mode="mobile"] .link { font-size : 1.5em;} #Full_Division_TopText[view-mode="mobile"] .arrow svg { font-size : 2em; margin : 0.2em 0;} #Full_Division_TopText[view-mode="mobile"] .arrow.none svg { font-size : 8vw; margin : 0.1em 0;} #Full_Division_TopText[view-mode="mobile"] .imgWrap { grid-template-columns : repeat(2,49%); max-width : 700px; margin : 0 auto; } @media (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Full_Division_TopText { font-size : min(2.2vw,18px); background: -webkit-linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #Full_Division_TopText .topTextBox .topText { font-size : clamp(6em, 13.5vw, 8em); } #Full_Division_TopText .sectionWrap { padding : 4em 0 3em;} #Full_Division_TopText .arrow svg { margin : 0.4em 0;} #Full_Division_TopText .arrow.none svg { margin : 0.2em 0;} #Full_Division_TopText .imgWrap .imgBox { aspect-ratio : 1 / 0.6;} #Full_Division_TopText .imgWrap { grid-template-columns : repeat(2,49%); max-width : 700px; margin : 0 auto; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Full_Division_TopText { font-size : min(3.2vw,16px); background: -webkit-linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #fff 80%, #DCDCDD 80%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #Full_Division_TopText .topTextBox { flex-direction : column; } #Full_Division_TopText .topTextBox .topText { width : 100%; font-size : 7em; line-height : 0.6em; } #Full_Division_TopText .topTextBox .topText.A { text-align : left; margin-left : -0.2em;} #Full_Division_TopText .topTextBox .topText.B { text-align : right; margin-top : -0.1em; margin-left : 0.1em; mix-blend-mode: multiply;} #Full_Division_TopText .sectionWrap .topTitBox .tit { font-size : 1.7em; margin-bottom : 0.4em;} #Full_Division_TopText .sectionWrap .topTitBox .subTit { font-size : 1.5em;} #Full_Division_TopText .sectionWrap .subTitBox .tit { font-size : 1.5em; margin-top : 1.2em;} #Full_Division_TopText .sectionWrap .subTitBox .subTit { font-size : min(1.4em,18px); line-height: 1.3em;} #Full_Division_TopText .link { font-size : 1.5em;} #Full_Division_TopText .arrow svg { font-size : 2em; margin : 0.2em 0;} #Full_Division_TopText .arrow.none svg { font-size : 8vw; margin : 0.1em 0;} #Full_Division_TopText .imgWrap { grid-template-columns : repeat(2,49%); max-width : 700px; margin : 0 auto; } @media (max-width:300px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Full_Division_TopText .onlyFold { display : inline-block;} #Full_Division_TopText .topTextBox .topText { font-size : 7em;} #Full_Division_TopText .sectionWrap .topTitBox .tit { font-size : 20px; line-height : 1.3em;} #Full_Division_TopText .sectionWrap .topTitBox .subTit, #Full_Division_TopText .sectionWrap .subTitBox .tit, #Full_Division_TopText .link { font-size : 17px;} #Full_Division_TopText .sectionWrap .subTitBox .subTit { font-size : 15px;} #Full_Division_TopText .arrow svg { margin : 0.3em 0;} #Full_Division_TopText .imgWrap { width : 100%;} #Full_Division_TopText .imgWrap .imgBox { padding-top : 100%;} }