@import '../css/easing.less'; /* @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); */ @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css) ; @font-face { font-family:"HN_Th"; src:url('../font/HelveticaNeueLTStd-Th.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Th.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Th.woff') format("woff"), url('../font/HelveticaNeueLTStd-Th.ttf') format("truetype"); } @font-face { font-family:"HN_UtlLt"; src:url('../font/HelveticaNeueLTStd-UltLt.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-UltLt.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-UltLt.woff') format("woff"), url('../font/HelveticaNeueLTStd-UltLt.ttf') format("truetype"); } @font-face {font-family:"HN_Lt"; src:url('../font/HelveticaNeueLTStd-Lt.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Lt.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Lt.woff') format("woff"), url('../font/HelveticaNeueLTStd-Lt.ttf') format("truetype"); } @font-face {font-family:"HN_Rm"; src:url('../font/HelveticaNeueLTStd-Rm.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Rm.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Rm.woff') format("woff"), url('../font/HelveticaNeueLTStd-Rm.ttf') format("truetype"); } @font-face {font-family:"HN_Bd"; src:url('../font/HelveticaNeueLTStd-Bd.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Bd.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Bd.woff') format("woff"), url('../font/HelveticaNeueLTStd-Bd.ttf') format("truetype"); } // @font-face { font-family:"YGP710"; src:url('../font/YoonGothicPro710.eot'); src:local('☺'), url('../font/YoonGothicPro710.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro710.woff') format("woff"), url('../font/YoonGothicPro710.ttf') format("truetype"); } // @font-face { font-family:"YGP720"; src:url('../font/YoonGothicPro720.eot'); src:local('☺'), url('../font/YoonGothicPro720.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro720.woff') format("woff"), url('../font/YoonGothicPro720.ttf') format("truetype"); } @font-face { font-family:"YGP730"; src:url('../font/YoonGothicPro730.eot'); src:local('☺'), url('../font/YoonGothicPro730.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro730.woff') format("woff"), url('../font/YoonGothicPro730.ttf') format("truetype"); } @font-face { font-family:"YGP740"; src:url('../font/YoonGothicPro740.eot'); src:local('☺'), url('../font/YoonGothicPro740.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro740.woff') format("woff"), url('../font/YoonGothicPro740.ttf') format("truetype"); } // @font-face { font-family:"YGP750"; src:url('../font/YoonGothicPro750.eot'); src:local('☺'), url('../font/YoonGothicPro750.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro750.woff') format("woff"), url('../font/YoonGothicPro750.ttf') format("truetype"); } @font-face { font-family:"YGP760"; src:url('../font/YoonGothicPro760.eot'); src:local('☺'), url('../font/YoonGothicPro760.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro760.woff') format("woff"), url('../font/YoonGothicPro760.ttf') format("truetype"); } @font-face { font-family:"YGP770"; src:url('../font/YoonGothicPro770.eot'); src:local('☺'), url('../font/YoonGothicPro770.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro770.woff') format("woff"), url('../font/YoonGothicPro770.ttf') format("truetype"); } // @font-face { font-family:"YGP780"; src:url('../font/YoonGothicPro780.eot'); src:local('☺'), url('../font/YoonGothicPro780.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro780.woff') format("woff"), url('../font/YoonGothicPro780.ttf') format("truetype"); } // @font-face { font-family:"YGP790"; src:url('../font/YoonGothicPro790.eot'); src:local('☺'), url('../font/YoonGothicPro790.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro790.woff') format("woff"), url('../font/YoonGothicPro790.ttf') format("truetype"); } @font-face { font-family: 'Kroeger0553'; src: url('../font/Kroeger0553.eot') format('embedded-opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Kroeger0553'; src: url(data:application/x-font-woff;charset=utf-8;base64,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 AAB2AMwAAQAB) format('woff'), url('../font/Kroeger0553.ttf') format('truetype'), url('../font/Kroeger0553.svg#Kroeger0553') format('svg'); font-weight: normal; font-style: normal; } *:fullscreen *:-ms-fullscreen, *:-webkit-full-screen, *:-moz-full-screen { overflow: auto !important; } /* 공통 */ @dandelion-move-time: 1s; @imgbox-delay: .5s; @imgbox-duration: .75s; @descBox-delay: .5s; @scrollBgClr : #fff; @portpolioListDuration: .75s; @portpolioImgDuration: .65s; @portpolioTextsDuration: .75s; @portpolioLogoDuration: .85s; @about_titleTop: 25%; @menuDescriptionDeley: .5s; @menuDescriptionDuration: .85s; // @minWidth: 414px; @minWidth: 435px; html , body { height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; } body * { -webkit-font-smoothing: antialiased; } body.none * { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor: move; } .nodelay { transition-delay: .0s !important; } .icon_svg { display: inline-block; width: 1em; height: 1em; fill: #fff; } /* 전체 페이지 */ .fullScreen () { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; } .over_fullScreen () { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; } /* 웹폰트 */ .HN_UtlLt () { font-family:"HN_UtlLt"; letter-spacing: 2px; } .HN_Th () { font-family:"HN_Th"; } .HN_Lt () { font-family:"HN_Lt"; } .HN_Rm () { font-family:"HN_Rm"; } .HN_Bd () { font-family:"HN_Bd"; } .NG_Nm () { font-family: 'Nanum Gothic'; font-weight: 400; } .NG_Md () { font-family: 'Nanum Gothic'; font-weight: 700; } .NG_Bd () { font-family: 'Nanum Gothic'; font-weight: 800; } .Noto_100 () { font-family: 'Noto Sans KR'; font-weight: 100; } .Noto_300 () { font-family: 'Noto Sans KR'; font-weight: 300; } .Noto_400 () { font-family: 'Noto Sans KR'; font-weight: 400; } .Noto_500 () { font-family: 'Noto Sans KR'; font-weight: 500; } .Noto_700 () { font-family: 'Noto Sans KR'; font-weight: 700; } .Noto_900 () { font-family: 'Noto Sans KR'; font-weight: 900; } div.loadingBox { position: absolute; left: 0px; top: 0px; z-index: 999; width: 100%; height: 100%; background-color: #000; .easeInOutQuad(.75s) ; transition-property: opacity; &.active { div.mask { opacity: 1; } } p.text { position: absolute; left: 0px; bottom: 0px; width: 100%; margin-bottom: -29px; color: #fff; font-size: 12px; // text-align: center; text-align: left; text-indent: 53px; transform: scale( 1.2 ) ; } div.mask { @boxWidth: 156px; @boxHeight: 140px; position: absolute; left: 50%; top: 50%; width: @boxWidth; height: @boxHeight; margin-left: -@boxWidth / 2; margin-top: -@boxHeight / 2; opacity: 0; // transform: scale( .8 ) ; .easeInOutQuad(1s) ; transition-property: opacity; div.box { position: absolute; left: 0px; width: 100%; background-position: center bottom; background-repeat: no-repeat; // background-size: cover; &.before { top: 0px; height: 100%; background-image: url('../images/main_loading_before.png'); } &.after { bottom: 0px; height: 0px; background-image: url('../images/main_loading_after.png'); .easeInOutQuad(.2s) ; } } } p.explain { background: url('../images/loading_explain.png') no-repeat center center; width: 468px; height: 42px; position: absolute; left: 50%; bottom: 80px; z-index: 100; transform: translateX( -50% ) ; @media screen and (max-width: @minWidth ) { visibility: hidden; display: none; } } } /* 메인 페이지 */ div.mainWrap { background-color: #000; height: 100%; .easeInOutQuad(0.5s) ; &.active { div.middleWrap { z-index: 101; } } div.mainCtrlBtns { visibility: hidden; position: absolute; right: 10px; top: 10px; z-index: 900; font-size: 0px; line-height: 0px; svg { display: inline-block; width: 10px; height: 10px; fill: #fff; cursor: pointer; } } /* 상단 컨텐츠 */ div.topWrap { @media screen and (max-width: 435px ) { // transform: translateX(-50%) translateY(-50%) translateZ(0) scale(.7); transform: initial; h1.logo { transform: rotateY( 180deg ) translateZ( 0px ) !important; opacity: 0 !important; } ul.menu { // transform: translateX( -50% ) rotateY( 0deg ) !important; opacity: 1 !important; transform: initial !important; font-size: 12px; > li.home { top: -85px !important; perspective: 250px; transform-style: preserve-3d; > a { background: url('../images/main_logo.png') no-repeat left top !important; width: 124px !important; height: 78px !important; display: block; backface-visibility: hidden; font-size: 0px; line-height: 0px; transform: scale(0.85) translateZ(-81px); } } > li:nth-child(2) { margin-left: -16px; } > li:last-child { padding-right: 0px !important; } > li { padding: 0px 10px !important; &:after { top: 8px !important; } } } } position: absolute; left: 0px; right: 0px; top: 100px; z-index: 150; transform: rotateY( 0deg ); backface-visibility: hidden; text-align: center; width: 100%; display: block; opacity: 1; .easeInOutQuad(.5s); transition-property: top; &.active { z-index: 150; h1.logo { transform: rotateY( 180deg ) translateZ( 0px ); } ul.menu { // transform: translateX( -50% ) rotateY( 0deg ); opacity: 1; transform: rotateY( 0deg ); opacity: 1; } } &.ie_active { z-index: 150; h1.logo { opacity: 0; } ul.menu { // opacity: 1; transform: translateX( -50% ) rotateY( 0deg ) ; opacity: 1; transform: rotateY( 0deg ) ; } } &.hidden { top: -15%; @media screen and ( max-width: @minWidth ) { top: 100px !important; } } /* 상단 로고 */ h1.logo , ul.menu { &.anim { .easeInOutQuad(.75s) ; } } h1.logo.ie_anim { .easeInOutQuad(.75s) ; transition-property: opacity ; } ul.menu.ie_anim { .easeInOutQuad(.75s) ; transform: translateX( -50% ) rotateY( 0deg ) ; transition-property: opacity ; } ul.menu.fixed { transform: translateX( -50% ) rotateY( 90deg ) !important; left: 50%; } ul.menu.fixed.add { .easeInOutQuad(.75s) ; transition-property: transform ; } ul.menu.fixed_anim { transform: translateX( -50% ) rotateY( 0deg ) !important; left: 50%; } h1.logo { background: url('../images/main_logo.png') no-repeat left top; width: 124px; height: 76px; margin-left: -75px; margin-top: -38px; display: block; backface-visibility: hidden; font-size: 0px; line-height: 0px; position: absolute; left: 50%; top: 50%; } /* 상단 메뉴 */ ul.menu { transform: translateX( -50% ) rotateY( 180deg ); backface-visibility: hidden; position: absolute; left: 0px; right: 0px; transform: rotateY( 180deg ); text-align: center; width: 100%; display: block; margin-top: -20px; > li { position: relative; padding: 25px 18px; display: inline-block; &.home { position: absolute; left: 50%; top: -40px; transform: translateX( -50% ) ; &:after { display: none; } > a { background: url('../images/icon_home_before.png') no-repeat left top; font-size: 0px; line-height: 0px; width: 26px; height: 19px; display: block; } &:hover > a { background: url('../images/icon_home_after.png') no-repeat left top; } } &:after { content: ''; display: block; position: absolute; right: -6px; top: 36px; width: 11px; height: 1px; font-size: 0px; line-height: 0px; background-color: rgba( 255, 255, 255, .3 ); transform: rotate( 90deg ); } &:last-child:after { display: none; } &.active , a:hover { color: #82ffe6; } a { color: #fff; font-family: 'HN_Rm' ; letter-spacing: 1px; } } } /* end of ul.menu */ } /* end of div.topWrap */ div.topWrap_type1 { position: absolute; left: 50%; top: 100px; z-index: 150; transform: translateX(-50%) translateY(-50%) translateZ(0) scale( 1.0 , 1.0 ); backface-visibility: hidden; -webkit-filter: blur(0); filter: blur(0); &:hover , &.active { z-index: 150; h1.logo { transform: rotateY( 180deg ) translateZ( 0px ); } ul.menu { transform: translateX( -50% ) translateY( -50% ) rotateY( 0deg ) translateZ( 0px ); } } /* 상단 로고 */ h1.logo , ul.menu { .easeInOutQuad(.75s) ; } h1.logo { background: url('../images/main_logo.png') no-repeat left top; /* width: 123px; */ width: 152px; height: 76px; display: block; backface-visibility: hidden; font-size: 0px; line-height: 0px; } /* 상단 메뉴 */ ul.menu { position: absolute; left: 50%; top: 50%; width: 472px; // 메뉴 박스의 가로사이즈는 현재 고정이다. transform: translateX( -50% ) translateY( -50% ) rotateY( 180deg ); backface-visibility: hidden; -webkit-filter: blur(0); filter: blur(0); > li { position: relative; float: left; padding: 30px; &.home { position: absolute; left: 50%; top: -50px; transform: translateX( -50% ) ; &:after { display: none; } } &:after { content: ''; display: block; position: absolute; right: -19px; top: 40px; width: 30px; height: 1px; font-size: 0px; line-height: 0px; background-color: #fff; opacity: .5; transform: rotate( 135deg ); } &:last-child:after { display: none; } &.active , a:hover { color: #82ffe6; } a { color: #fff; } } } /* end of ul.menu */ } /* end of div.topWrap */ div.menuDescription { // border: 10px solid red; @menu_zIndex: 50; @filter_blur: 10px; @media screen and ( max-width: @minWidth ) { transform: scale( .7 ) ; } /* @media screen and ( max-height: 900px ) { margin-top: -8%; } @media screen and ( max-height: 800px ) { margin-top: -6%; } @media screen and ( max-height: 700px ) { margin-top: -5%; } @media screen and ( max-height: 600px ) { margin-top: -3%; } */ .HN_UtlLt() ; position: absolute; left: 50%; top: 50%; z-index: 100; transform: translateX( -50% ) translateY( -50% ) ; font-size: 78px; color: #fff; /* margin-top: -10%; */ margin-left: -10px; .easeInOutQuad( .5s ) ; opacity: 1; &.anim { div.type.main p.word { .easeInOutQuad(@menuDescriptionDuration) ; } div.type.main p.descText { .easeInOutQuad(@menuDescriptionDuration) ; } span.line { .easeInOutQuad(@menuDescriptionDuration) ; } } div.type { &.main { visibility: hidden; } &.main.active { visibility: visible; } &.main.step1 { p.word { // .easeInOutQuad(@menuDescriptionDuration) ; opacity: 0; display: block; position: absolute; -webkit-filter: blur(@filter_blur); text-shadow: 1px 1px 1px rgba(0,0,0,.1); transform: scaleX( 1.15 ) scaleY( 0.9 ); &.e1 { bottom: 3px; left: 0px; } &.l { bottom: 3px; left: 0px; } &.d { bottom: 3px; left: 0px; } &.e2 { bottom: 3px; left: 0px; } &.r1 { bottom: 4px; left: 0px; } &.t { top: -47px; right: 0px; } &.r2 { top: -47px; right: 0px; } &.e3 { top: -47px; right: 0px; } &.e4 { top: -47px; right: 0px; } } p.descText { // .easeInOutQuad(@menuDescriptionDuration) ; .HN_UtlLt() ; text-shadow: 1px 1px 1px rgba(0,0,0,.5); white-space: -1px; position: absolute; left: 50%; bottom: -75px; width: 410px; font-size: 18px; z-index: 500; text-align: center; transform: translateX( -50% ); opacity: 0; margin-left: 10px; } } &.main.step2 { p.word { // .easeInOutQuad(@menuDescriptionDuration) ; opacity: 0; display: block; position: absolute; -webkit-filter: blur(@filter_blur); text-shadow: 1px 1px 1px rgba(0,0,0,.1); transform: scaleX( 1.15 ) scaleY( 0.9 ); &.a { bottom: 4px; left: 0px; } &.s { bottom: 4px; left: 0px; } &.e { top: -47px; right: 0px; } &.l { top: -47px; right: 0px; } &.d { top: -47px; right: 0px; } &.o { top: -47px; right: 0px; } // &.t { top: -47px; right: 0px; } } p.descText { // .easeInOutQuad(@menuDescriptionDuration) ; .HN_UtlLt() ; text-shadow: 1px 1px 1px rgba(0,0,0,.5); white-space: -1px; position: absolute; left: 50%; bottom: -75px; width: 410px; font-size: 18px; z-index: 500; text-align: center; transform: translateX( -50% ); opacity: 0; margin-left: 10px; } } &.main.step3 { p.word { // .easeInOutQuad(@menuDescriptionDuration) ; opacity: 0; display: block; position: absolute; -webkit-filter: blur(@filter_blur); text-shadow: 1px 1px 1px rgba(0,0,0,.1); transform: scaleX( 1.15 ) scaleY( 0.9 ); &.a { bottom: 4px; left: 0px; } &.s { bottom: 4px; left: 0px; } &.e { top: -47px; right: 0px; } &.l { top: -47px; right: 0px; } &.d { top: -47px; right: 0px; } &.o { top: -47px; right: 0px; } // &.t { top: -47px; right: 0px; } } p.descText { // .easeInOutQuad(@menuDescriptionDuration) ; .HN_UtlLt() ; text-shadow: 1px 1px 1px rgba(0,0,0,.5); white-space: -1px; position: absolute; left: 50%; bottom: -75px; width: 410px; font-size: 18px; z-index: 500; text-align: center; transform: translateX( -50% ); opacity: 0; margin-left: 10px; } } } span.line { // .easeInOutQuad(@menuDescriptionDuration) ; font-size: 0px; line-height: 0px; height: 1px; width: 54px; background-color: #fff; position: absolute; z-index: @menu_zIndex; opacity: .5; transform: translateX( -50% ) translateY( -51% ) rotate( 135deg ); left: 50%; top: 50%; width: 0px; margin-top: -18px; margin-left: 18px; } &.active { span.line { width: 126px; } div.step1 { p.word { -webkit-transition-delay: @menuDescriptionDeley !important; /* Safari */ transition-delay: @menuDescriptionDeley !important; opacity: 1 !important; -webkit-filter: blur(0px) !important; &.e1 { left: -142px !important; } &.l { left: -99px !important; } &.d { left: -86px !important; } &.e2 { left: -40px !important; } &.r1 { left: 4px !important; } &.t { right: -53px !important; } &.r2 { right: -76px !important; } &.e3 { right: -119px !important; } &.e4 { right: -164px !important; } } // end of p.word p.descText { -webkit-transition-delay: 1.35s !important; /* Safari */ transition-delay: 1.35s !important; opacity: 1 !important; } } /* end of step1 */ div.step2 { p.word { -webkit-transition-delay: @menuDescriptionDeley !important; /* Safari */ transition-delay: @menuDescriptionDeley !important; opacity: 1 !important; -webkit-filter: blur(0px) !important; &.a { left: -72px !important; } &.s { left: -30px !important; } &.e { right: -62px !important; } &.l { right: -77px !important; } &.d { right: -121px !important; } &.o { right: -166px !important; } } // end of p.word p.descText { -webkit-transition-delay: 1.35s !important; /* Safari */ transition-delay: 1.35s !important; opacity: 1 !important; } } /* end of step2 */ div.step3 { p.word { -webkit-transition-delay: @menuDescriptionDeley !important; /* Safari */ transition-delay: @menuDescriptionDeley !important; opacity: 1 !important; -webkit-filter: blur(0px) !important; &.a { left: -72px !important; } &.s { left: -30px !important; } &.e { right: -62px !important; } &.l { right: -77px !important; } &.d { right: -121px !important; } &.o { right: -166px !important; } } // end of p.word p.descText { -webkit-transition-delay: 1.35s !important; /* Safari */ transition-delay: 1.35s !important; opacity: 1 !important; } } /* end of step3 */ } // end of &.active } // end of div.menuDescription div.middleWrap { height: 100%; position: relative; z-index: 100; div.maskCover { .fullScreen() ; background-color: #000; z-index: 102; opacity: 0; visibility: hidden; &.anim { visibility: visible; .easeInOutQuad(.5s) ; } &.active { opacity: 1; } } div.subWrap { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 101; &.active { z-index: 100; visibility: visible; } div.subContWrap { height: 100%; background-color: #000; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; visibility: hidden; opacity: 0; &.anim { .easeInOutQuad(.5s) } &.active { visibility: visible; opacity: 1; } &[data-sub=about] { @about_titleTop: 55%; div.aboutBox { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; visibility: hidden; opacity: 0; p.bg { content: ''; display: block; position: absolute; left: 0px; width: 100%; height: 50%; bottom: -50%; z-index: 1; background-color: #fff; .easeInOutQuad(.5s) ; } &.active { z-index: 1; visibility: visible; opacity: 1; p.bg { bottom: 0px; } div.pageNum { opacity: 1; } div.optCtrl { opacity: 1; } ul.list { > li:nth-child(1) { div.topBox { opacity: 1; } } } } ul.pageNum2 { position: absolute; left: 50%; top: 50%; z-index: 500; margin-top: -27px; font-family: dotum; opacity: 1; transform: translateX( -50% ); text-align: center; visibility: hidden; @media screen and ( max-width: @minWidth ) { visibility: visible; } > li { width: 0px; height: 0px; border: 4px solid #fff; border-radius: 100%; margin: 0px 5px; float: left; &.active { border: 4px solid #82ffe6; } } } div.pageNum { position: absolute; left: 50%; top: 50%; z-index: 500; margin-left: -10px; margin-top: -52px; font-family: dotum; opacity: 0; .easeInOutQuad(.25s) ; @media screen and ( max-width: @minWidth ) { visibility: hidden; } &:after { content: ''; display: block; position: absolute; left: 6px; top: 22px; width: 30px; height: 1px; line-height: 0px; font-size: 0px; background-color: #fff; transform: rotate( -45deg ); transform-origin: 0px 0px; opacity: .3; } span { &.crnt { color: #7aecd5; font-size: 11px; position: absolute; left: 2px; top: -1px; } &.total { color: #8f8e8d; font-size: 11px; position: absolute; left: 19px; top: 12px; } } } /* end of div.pageNum */ div.optCtrl { position: absolute; right: 60px; top: 50%; z-index: 10; opacity: 0; .easeInOutQuad(.25s) ; @media screen and ( max-width: @minWidth ) { visibility: hidden; } button { position: absolute; left: 0px; width: 21px; height: 11px; font-size: 0px; line-height: 0px; outline: 0px; &:hover:before , &:hover:after { background-color: #7aecd5; } &:before , &:after { content: ''; display: block; width: 16px; height: 1px; font-size: 0px; line-height: 0px; background: #919190; position: absolute; } &[data-type=prev] { top: -30px; &:before { left: 0px; bottom: 0px; transform: rotate( -45deg ); transform-origin: 0px 100%; } &:after { right: 0px; bottom: 0px; transform: rotate( 45deg ); transform-origin: 100% 100%; } } &[data-type=next] { top: 15px; &:before { left: -1px; top: 0px; transform: rotate( 45deg ); transform-origin: 0px 100%; } &:after { right: -1px; top: 0px; transform: rotate( -45deg ); transform-origin: 100% 100%; } } } } /* end of div.optCtrl */ ul.list { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; // &.anim { .easeInOutQuad(0.25s) ; } &.anim { .easeInOutCubic(0.25s) ; } > li { visibility: hidden; opacity: 0; .easeInOutQuad(.5s) ; div.topBox { position: absolute; left: 0px; top: 0px; width: 100%; height: 50%; background-color: transparent; background-repeat: no-repeat; background-position: center top; // background-size: 110% auto; background-size: cover; opacity: 0; .easeInOutQuad(.85s) ; h2.title { .HN_UtlLt() ; color: #fff; font-size: 50px; // position: absolute; left: 50%; top: @about_titleTop; // transform: translateX( -50% ) scaleX( 1.15 ); position: absolute; left: 0px; top: @about_titleTop; right: 0px; transform: scaleX( 1.15 ); text-align: center; opacity: 0; margin-bottom: 20px; -webkit-transition-delay: .5s !important; transition-delay: .5s !important; .easeInOutQuad(.5s) ; @media screen and ( max-width: 435px ) { font-size: 40px; } @media screen and ( max-width: @minWidth ) { font-size: 40px; } @media screen and ( max-width: 375px ) { font-size: 30px; } } } div.descBox { position: absolute; left: 0px; width: 100%; height: 50%; bottom: 0px; // background-color: #fff; .easeInOutQuad(.5s) ; div.textInfo { &.first { h3 , p { opacity: 0 !important; margin-bottom: 20px !important; } } h3 , p { margin: auto; line-height: 1.4; .easeInOutQuad(.3s) ; } h3 { font-family: 'YGP760'; font-size: 18px; @media screen and ( max-width: @minWidth ) { font-size: 15px; } } p { font-family: 'YGP740'; font-size: 14px; @media screen and ( max-width: @minWidth ) { font-size: 11px; } } } } &:nth-child(1) { div.topBox { opacity: 0; background-image: url('../images/about_bg01.jpg'); .easeInOutQuad(.5s) ; transition-delay: .35s; @media screen and ( max-width: @minWidth ) { background-size: cover; } } div.descBox { bottom: -50%; div.textInfo { width: 70%; position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ) ; h3 , p { margin-bottom: 20px; opacity: 0; } h3 { transition-delay: .5s; } p:nth-of-type(1) { transition-delay: .6s; } p:nth-of-type(2) { transition-delay: .7s; } } } } /* end of nth-child(1) */ &:nth-child(2) { div.topBox { background-image: url('../images/about_bg02.jpg'); @media screen and ( max-width: @minWidth ) { background-position: -190px -67px; background-size: 270% 220%; } } div.descBox { div.sideBox { width: 50%; height: 100%; position: absolute; top: 0%; &.num1 { background: url('../images/about_bg02-1.jpg') no-repeat center center; background-size: cover; left: 0px; top: 100%; .easeInOutQuad(.5s) ; @media screen and ( max-width: @minWidth ) { visibility: hidden; } } &.num2 { right: 0px; top: 100%; .easeInOutQuad(1s) ; @media screen and ( max-width: @minWidth ) { width: 100%; } } } div.textInfo { width: 69%; position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ) ; h3 , p { margin-bottom: 20px; opacity: 0; } h3 { transition-delay: .5s; } p:nth-of-type(1) { transition-delay: .75s; } p:nth-of-type(2) { transition-delay: 1s; } // 0.25 } } } /* end of nth-child(2) */ &:nth-child(3) { div.topBox { background-image: url('../images/about_bg03.jpg'); @media screen and ( max-width: @minWidth ) { background-size: cover; } } div.descBox { div.sideBox { width: 50%; height: 100%; position: absolute; top: 0%; &.num1 { background-color: #4e3927; left: 0px; top: 100%; .easeInOutQuad(.5s) ; p.creation { .HN_Th() ; position: absolute; left: 50%; top: 23%; transform: translateX( -50% ); font-size: 21px; color: #fff; letter-spacing: 1.7px; width: 60%; } @media screen and ( max-width: @minWidth ) { visibility: hidden; } } &.num2 { right: 0px; top: 100%; .easeInOutQuad(1s) ; @media screen and ( max-width: @minWidth ) { width: 100%; } } } div.textInfo { width: 69%; position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ) ; h3 , p { margin-bottom: 20px; opacity: 0; } h3 { transition-delay: .5s; } p:nth-of-type(1) { transition-delay: .75s; } p:nth-of-type(2) { transition-delay: 1s; } } } } /* end of nth-child(3) */ &.active { visibility: visible; opacity: 1; &:nth-child(1) { div.topBox { // opacity: 1; h2.title { opacity: 1; margin-bottom: 0px; .easeInOutQuad(.5s) ; } } div.descBox { bottom: 0px; div.textInfo { h3 , p { margin-bottom: 10px; opacity: 1; } } } } &:nth-child(2) { div.topBox { opacity: 1; h2.title { opacity: 1; margin-bottom: 0px; .easeInOutQuad(.5s) ; } } div.descBox { bottom: 0px; div.sideBox.num1 { top: 0px; } div.sideBox.num2 { top: 0px; } div.textInfo { h3 , p { margin-bottom: 10px; opacity: 1; } } } } &:nth-child(3) { div.topBox { opacity: 1; h2.title { opacity: 1; margin-bottom: 0px; .easeInOutQuad(.5s) ; } } div.descBox { bottom: 0px; div.sideBox.num1 { top: 0px; } div.sideBox.num2 { top: 0px; } div.textInfo { // h3 , p { margin-bottom: 10px; opacity: 1; } h3 { margin-bottom: 5px; opacity: 1; } p { margin-bottom: 20px; opacity: 1; } } } } } /* end of active */ } } /* end of ul.list */ } /* end of div.aboutBox */ } /* end of &[data-sub=about] */ &[data-sub=service] { div.serviceBox { background: url('../images/service_bg01.jpg') no-repeat center center; background-size: cover; height: 100%; /* 준비가 되기 전까지 이벤트 접근을 막아줄 커버 */ div.maskCover { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: #333; z-index: 200; opacity: 0 ; } &.active { // script 에서 시작시 활성화 클래스를 삽입하여 줍니다. > ul.menu { > li { &:nth-child(1) { height: 100%; transition-delay: 0s; } &:nth-child(2) { height: 100%; transition-delay: .35s; border-left: 1px solid #000; p.bgBox > img { margin-left: 0% !important; } } &:nth-child(3) { height: 100%; transition-delay: .7s; border-left: 1px solid #000; } } } > ul.menu.mobile { > li { opacity: 1; &:nth-child(1) { } &:nth-child(2) { } &:nth-child(3) { } // div.subMenu { // &.activeMobile { // width: 100%; // top: 50%; // transform: translateY( -50% ); // } // border: 1px solid red; // } div.infoBox { // top: 50% !important; } } } } > ul.menu.mobile { position: absolute; top: 20%; left: 0px; height: 80%; width: 100%; > li { width: 100% !important; left: 0px !important; opacity: 0; height: 33.3% !important; border-top: 1px solid rgba( 0, 0, 0, .2 ); &:nth-child(1) { top: 0px; ul.menuList { background: #614931; > li:nth-child(1) a { } > li:nth-child(2) a { } > li:nth-child(3) a { } } } &:nth-child(2) { top: 33.3%; ul.menuList { background: #6D3E33; } } &:nth-child(3) { top: 66.6%; height: 33.4% !important; ul.menuList { background: #513B72; } } &.active { // top: -30%; // height: 130% !important; top: 0%; height: 100% !important; z-index: 100; div.subMenu { &.activeMobile { width: 100%; // top: 50%; // transform: translateY( -50% ); top: 0% !important; transform: initial !important; margin-top: 0px; padding-top: 0px; height: 50%; h3 { font-size: 40px !important; margin-top: 9%; } } } div.btns { visibility: visible; opacity: 1; } ul.menuList { visibility: visible; opacity: 1; > li { em { display: none; } } } div.infoBox { top: 50% !important; } } div.coverBox { div.infoBox { overflow: hidden; } } ul.menuList { visibility: hidden; opacity: 0; left: 0px; top: 100%; transform: initial; width: 100%; height: 68px; border-bottom: 1px solid rgba( 255 , 255 , 255 , .1 ); text-align: center; > li { display: inline-block; margin: 0px 5px; > a { padding-top: 0px !important; height: 68px; line-height: 68px; font-family: gothic !important; font-size: 11px !important; } } } div.btns { visibility: hidden; opacity: 0; width: 100% !important; bottom: auto; top: 50%; margin-top: -35px; button.more { height: 15px !important; &:before { background: rgba( 255 , 255 , 255 , .5 ) !important; transform: initial !important; transform-origin: initial !important; } p.line { margin-top: 0px !important; transform: initial !important; background: rgba( 255 , 255 , 255 , .5 ) !important; } &:after { background: rgba( 255 , 255 , 255 , .5 ) !important; transform: initial !important; transform-origin: 100% 0% !important; } } } div.infoBox { width: 100% !important; top: 100% !important; } div.subMenu { left: 0px !important; h3 { left: 50% !important; top: 50% !important; transform: translateX( -50% ) translateY( -50% ); } } p.bgBox { img { .easeInOutQuad(.35s) ; width: 100%; height: 100%; } &.active { img { width: 100%; height: 50%; } } } } } > ul.menu { .easeInOutQuad(.35s) ; > li { .easeInOutQuad(.35s) ; overflow: hidden; position: absolute; top: 0px; width: 33.3%; z-index: 1; height: 0%; /* height: 100%; */ background-color: rgba( 255, 255, 255, .1 ); @media screen and ( min-width: @minWidth ) { &:hover { p.bgBox { opacity: 1; } } } &:nth-child(1) { left: 0%; p.bgBox > img { } div.infoBox { right: 0%; background-color: #614931; } } &:nth-child(2) { left: 33.3%; width: 33.4%; border-left: 1px solid transparent; p.bgBox > img { margin-left: -27%; } div.infoBox { right: 0%; background-color: #6d3e33; } } &:nth-child(3) { left: 66.7%; border-left: 1px solid transparent; p.bgBox > img { // left: initial !important; left: auto !important; right: 0px; } div.coverBox { left: initial; right: 0%; div.infoBox { left: 0%; background-color: #513b72; } } } &.anim { // active 클래스를 주기전 트랜지션 딜레이 시간을 초기화 합니다. z-index: 10; &:nth-child(1) { transition-delay: 0s !important; } &:nth-child(2) { transition-delay: 0s !important; } &:nth-child(3) { transition-delay: 0s !important; } } /* li 클릭시 활성화될 css style */ &.active { // 현재 선택된 li 의 크기를 페이지 전체로 전환 합니다. z-index: 10; /* E-Biz 활성화*/ &:nth-child(1) { width: 100% !important; div.subMenu { left: 0%; width: 50%; transform: translateX(0) translateZ(0); h3 { font-size: 70px; top: -120px; } ul.menuList {} } div.btns { width: 50%; } } /* SI 활성화*/ &:nth-child(2) { width: 100% !important; left: 0px; border: 0px; div.subMenu { left: 0%; width: 50%; transform: translateX(0) translateZ(0); h3 { font-size: 70px; top: -120px; } ul.menuList {} } div.btns { width: 50%; } } /* Solution 활성화 */ &:nth-child(3) { div.subMenu { left: 50%; width: 50%; transform: translateX(0) translateZ(0); h3 { font-size: 70px; top: -120px; } ul.menuList {} } width: 100% !important; left: 0px; border: 0px; div.btns { width: 50%; left: 50%; } } div.infoBox { visibility: visible !important; } } /* 컨텐츠가 들어있는 커버 공통 */ div.coverBox { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; /* 컨텐츠 설명문구 공통 */ div.infoBox { visibility: hidden; position: absolute; top: 0px; z-index: 10; width: 50%; height: 100%; .easeInOutQuad(.3s) ; ul.descriptionList { .easeInOutQuad(.5s) ; > li { position: relative; p.texts { color: #fff; opacity: .5; position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ) ; font-size: 14px; line-height: 1.6; @media screen and (max-width: 1024px) { font-size: 13px; } @media screen and (max-width: @minWidth) { width: 80%; span { display: none; } } } } } } } /* 서브메뉴 텍스트 모음 공통 */ div.subMenu { position: absolute; left: 0%; top: 50%; z-index: 10; transform: translateZ(0px); margin-top: -134px; width: 100%; height: 268px; opacity: 0; .easeInOutQuad(.3s) ; padding-top: 70px; h3 { .HN_UtlLt() ; font-size: 30px; color: #fff; width: 100%; height: 70px; line-height: 70px; text-align: center; opacity: 0; .easeInOutQuad(.45s) ; position: absolute; left: 0px; right: 0px; top: 0px; } ul.menuList { position: absolute; left: 50%; transform: translateX( -50% ) translateZ( 0px ); .easeInOutQuad(.3s) ; li { opacity: 0; margin-top: 35px; .easeInOutQuad(.3s) ; &.active a { opacity: 1; } a { opacity: .5; // font-family: dotum; font-family: "HN_Lt"; font-size: 15px; letter-spacing: 1px; display: block; color: #fff; padding-top: 15px; .easeInOutQuad(.3s) ; &:hover { opacity: 1; } } } } } &:nth-child(1) { div.subMenu.active { opacity: 1; h3 { opacity: 1; transition-delay: .1s !important; } ul.menuList { li:nth-child(1) { opacity: 1; margin-top: 0px; transition-delay: .1s !important; } li:nth-child(2) { opacity: 1; margin-top: 0px; transition-delay: .2s !important; } li:nth-child(3) { opacity: 1; margin-top: 0px; transition-delay: .3s !important; } li:nth-child(4) { opacity: 1; margin-top: 0px; transition-delay: .4s !important; } li:nth-child(5) { opacity: 1; margin-top: 0px; transition-delay: .5s !important; } } } } &:nth-child(2) { div.subMenu.active { opacity: 1; h3 { opacity: 1; transition-delay: .1s !important; } ul.menuList { li:nth-child(1) { opacity: 1; margin-top: 0px; transition-delay: .1s !important; } li:nth-child(2) { opacity: 1; margin-top: 0px; transition-delay: .2s !important; } li:nth-child(3) { opacity: 1; margin-top: 0px; transition-delay: .3s !important; } li:nth-child(4) { opacity: 1; margin-top: 0px; transition-delay: .4s !important; } li:nth-child(5) { opacity: 1; margin-top: 0px; transition-delay: .5s !important; } } button.more { opacity: 1; transition-delay: .6s !important; } } } &:nth-child(3) { div.subMenu.active { opacity: 1; h3 { opacity: 1; transition-delay: .1s !important; } ul.menuList { li:nth-child(1) { opacity: 1; margin-top: 0px; transition-delay: .1s !important; } li:nth-child(2) { opacity: 1; margin-top: 0px; transition-delay: .2s !important; } li:nth-child(3) { opacity: 1; margin-top: 0px; transition-delay: .3s !important; } } button.more { opacity: 1; transition-delay: .6s !important; } } } > p.bgBox { opacity: 0; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; .easeInOutQuad(.75s) ; &.active { opacity: 1; } > img { position: absolute; left: 0px; top: 0px; height: 100%; } } } // end of li } // end of ul.menu div.btns { position: absolute; left: 0px; bottom: 20%; z-index: 100; width: 100%; .easeInOutQuad(.3s) ; } button.more { position: absolute; left: 50%; bottom: 20%; z-index: 100; font-size: 0px; line-height: 0px; width: 19px; height: 19px; outline: none; opacity: 0; .easeInOutQuad(.45s) ; &.delay { transition-delay: .6s !important; } &.show { opacity: 1; } &.menu { transform: rotate( 360deg ) translateZ(0px); p.line { background: #89ffe0; transform: rotate(90deg) translateZ(0px); } &:before { background: #89ffe0; transform: rotate(90deg) translateZ(0px); transform-origin: 0% 0%; top: 0%; } &:after { background: #89ffe0; transform: rotate(90deg) translateZ(0px); transform-origin: 100% 0%; top: 100%; } } &:before , &:after , p.line { content: ''; display: block; height: 1px; font-size: 0px; line-height: 0px; position: absolute; .easeInOutQuad(.45s) ; } &:before { background: #fff; top: 50%; left: 0px; right: 0px; } &:after { background: #fff; top: 50%; left: 0px; right: 0px; } p.line { top: 50%; left: 0px; right: 0px; margin-top: -1px; } &:hover , &.active { transform: rotate( 360deg ) translateZ(0px); &:before { background: #89ffe0; } &:after { background: #89ffe0; transform: rotate( 90deg ) translateZ(0px); } } } } } /* end of service */ &[data-sub=contact] { div.contactBox { height: 100%; background: url('../images/contact_map.png') no-repeat center center #1d1d1d; @media screen and (max-width: @minWidth ) { background: url('../images/contact_map_mobile.png') no-repeat center center #1d1d1d; background-size: cover; div.map { left: 19% !important; transform: initial !important; } p.text.type1 { width: 100px; transform: translateX( -82% ) translateY( 66% ); left: 0px !important; top: 0px !important; } p.text.type2 { top: 0px !important; right: 0px !important; width: 100px; height: 20px; transform: translateX( 192% ) translateY( -135% ); } p.text.type3 { top: 0px !important; right: 0px !important; left: 0px !important; width: 100px; height: 20px; transform: translateX( 44% ) translateY( 304% ); } p.text.type4 { top: 0px !important; right: 0px !important; transform: translateX( -41% ) translateY( 510% ); width: 80px; height: 20px; } div.btnRequest { display: none; } } // background-size: cover; // @media screen and (max-width: 900px) { font-size: 40px; } div.mapInfo { position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ); p.text { position: absolute; font-family: 'YGP730'; font-size: 13px; color: #7C7C7C; &.type1 { left: -131px; top: 39px;} &.type2 { right: -273px; top: -32px; } &.type3 { right: -185px; top: 90px; } &.type4 { top: 192px; left: -54px; } } } div.map { position: absolute; left: 50%; top: 50%; border: 3px solid #89FFE0; border-radius: 100%; width: 0px; height: 0px; transform: translateX( -231px ) translateY( -45px ); font-family: 'YGP740'; font-size: 13px; color: #7C7C7C; letter-spacing: 0.5px; &:after { content: ''; display: block; width: 14px; height: 8px; position: absolute; left: 4px; top: -27px; width: 0px; height: 0px; border-top: 18px solid #89ffe0; border-left: 2px solid transparent; border-right: 5px solid transparent; border-bottom: 3px solid transparent; transform: rotate( 23deg ); } div.balloon { @balloonWidth: 276px ; color: #000; background: #89FFE0; padding: 6px; width: 58px; height: 40px; border-radius: 6px; position: absolute; left: -6px; top: -61px; font-size: 12px; font-weight: bold; overflow: hidden; margin-top: 0px; .easeInOutQuad(.5s) ; &.active , &:hover { width: 276px; height: 45px; margin-top: -5px; > p.text { opacity: 0; } > div.info { opacity: 1; } } > p.text { position: absolute; opacity: 1; .easeInOutQuad(.5s) ; } > div.info { opacity: 0; font-size: 12px; width: @balloonWidth - 10px; .easeInOutQuad(.5s) ; p.address { text-align: center; font-weight: bold; padding-bottom: 3px; } p.call { font-weight: normal; text-align: center; } } } } div.topBox { @media screen and (max-height: 520px) { top: 100px; } position: absolute; left: 50%; top: 200px; transform: translateX( -50% ); .easeInOutQuad(.5s) ; h2.title { @media screen and (max-height: 600px) , (max-width: 450px) { font-size: 30px; } @media screen and (max-height: 520px) { transform: scale( 0 ); } .HN_UtlLt() ; color: #fff; font-size: 58px; text-align: center; transform: scaleY( 0.9 ) ; .easeInOutQuad(.5s) ; } div.btns { margin-top: 30px; text-align: center; visibility: hidden; a.btn { width: 99px; height: 29px; display: inline-block; background: #1a1a1a; border: 1px solid #343434; color: #7c7c7c; font-family: dotum; font-size: 14px; line-height: 29px; text-align: center; border-radius: 3px; box-shadow: 0px 2px 2px rgba( 0, 0, 0, .5 ); margin: 0px 2px; margin-bottom: 5px; &:hover { color: #7ac3c8; } } } } /* end of topBox */ div.btmBox { font-family: dotum; div.btns { position: absolute; left: 0px; bottom: 50px; right: 0px; text-align: center; display: none; &.write { display: block; position: static; left: 0px; bottom: 50px; right: 0px; } @media screen and (max-width: @minWidth) { display: block; } a { width: 99px; height: 29px; display: inline-block; background: #000; color: #fff; font-family: dotum; font-size: 14px; line-height: 29px; text-align: center; margin: 0px 2px; margin-bottom: 5px; } } // &:after { // content: ''; display: block; // background-color: #7ac3c8; // height: 3px; font-size: 0px; line-height: 0px; // position: absolute; left: 0px; bottom: 0px; right: 0px; // } div.btnRequest { @linkExperienceWidth: 150px; @linkExperienceHeight: 42px; width: @linkExperienceWidth; height: @linkExperienceHeight; position: absolute; left: 50%; bottom: 100px; transform: translateX( -50% ) scale( 0.95 ); perspective: 350px; cursor: pointer; // &:hover { &.active { div.linkWrap { transform: rotateY( 0deg ) rotateX( -90deg ); } } div.linkWrap { transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY( 0deg ) rotateX( 0deg ); width: @linkExperienceWidth; height: @linkExperienceHeight; line-height: @linkExperienceHeight; font-size: 12px; font-family: 'dotum'; color: #fff; text-align: center; .easeInOutQuad(0.5s) ; div.front { width: @linkExperienceWidth; height: @linkExperienceHeight; transform: rotateX( 0deg ) translateZ( @linkExperienceHeight/2 ); position: absolute; left: 0px; top: 0px; backface-visibility: hidden; background-color: #000; } div.back { width: @linkExperienceWidth; height: @linkExperienceHeight; position: absolute; left: 0px; bottom: 0px; transform-origin: center top 0px; transform: rotateX( 90deg ) translateY( -@linkExperienceHeight/2 ); backface-visibility: hidden; background-color: #000; } } } button.btnRequest { color: #89ffe0; font-weight: bold; font-family: dotum; font-size: 15px; position: absolute; left: 50%; bottom: 50px; transform: translateX( -50% ) ; outline: 0px; &:before { content: ''; display: block; background: url('../images/contact_arr.png') no-repeat left top; width: 17px; height: 9px; position: absolute; left: 50%; top: 30px; transform: translateX( -50% ) ; } } div.requestBox { background: #fff; // border-top: 3px solid #89ffe0; position: absolute; left: 0px; right: 0px; bottom: 0px; padding-bottom: 43px; text-align: center; visibility: hidden; z-index: 200; .easeInOutQuad(.5s) ; &.active { visibility: visible; } button.closeX { position: absolute; right: 52px; top: 42px; font-size: 0px; line-height: 0px; width: 31px; height: 31px; outline: 0px; // overflow: hidden; &:before , &:after { content: ''; display: block; width: 44px; height: 1px; font-size: 0px; line-height: 0px; background: #000; position: absolute; top: 0px; } &:before { transform: rotate(45deg); transform-origin: 0px 0px; left: 0px; } &:after { transform: rotate(-45deg); transform-origin: 100% 0%; right: 0px; } } h3.title { margin-top: 70px; margin-bottom: 20px; color: #333; font-size: 40px; font-family: "Malgun Gothic"; letter-spacing: -2px; } > dl { &.address { > dt { visibility: hidden; position: absolute; } > dd { font-size: 15px; font-family: dotum; color: #333; letter-spacing: -1px; } } &.phone , &.fax { margin-top: 3px; display: inline-block; > dt { display: inline-block; color: #1d1d1d; font-size: 12px; } > dd { display: inline-block; color: #1d1d1d; font-size: 13px; } } &.email { margin-top: 3px; > dt { visibility: hidden; position: absolute; } > dd { color: #0090bf; font-size: 13px; } } } ul.write { width: 540px; margin: auto; > li { border-bottom: 1px solid #d6d6d6; margin-top: 20px; input[type=text] { height: 35px; line-height: 35px; width: 100%; border: 0px; outline: 0px; text-align: left; } textarea { width: 100%; height: 200px; border: 0px; outline: 0px; resize: none; } } } div.btns { margin-top: 33px; button[type=button] { width: 99px; height: 29px; display: inline-block; border: 1px solid #999; font-family: dotum; font-size: 12px; line-height: 29px; text-align: center; // border-radius: 3px; margin: 0px 2px; outline: 0px; vertical-align: middle; &.cancel { color: #7c7c7c; &:hover { background: #eee; } } &.access { color: #fff; background: #1a1a1a; border: 0px; &:hover { color: #7ac3c8; } } } } div.fileWrap { margin-bottom: 10px; text-align: left; div.btnFile { position: relative; display: inline-block; overflow: hidden; width: 61px; height: 24px; float: left; input[type=file] { position: absolute; left: 0px; top: 0px; border: 100px solid red; cursor: pointer; opacity: 0; } button.file { width: 61px; height: 24px; line-height: 24px; border: 1px solid #ccc; color: #333; border-radius: 3px; background: #fff; font-size: 12px; font-family: dotum; } } p.fileName { height: 24px; display: inline-block; text-align: left; text-indent: 10px; line-height: 24px; font-size: 12px; vertical-align: top; } button.x { visibility: hidden; width: 30px; outline: 0px; &.active { visibility: visible; } } } /* end of fileWrap */ } } /* end of btmBox */ } } /* end of contact */ &[data-sub=experience] { div.experienceBox { height: 100%; @media screen and ( max-width: @minWidth ) { div.experienceIntro { p.introText { left: 10% !important; right: 10% !important; width: 80% !important; margin-left: 0% !important ; font-size: 14px; } p.bg { background-position: 75% 0; } div.show { color: #fff !important; width: 80%; background: #000; text-align: center; height: 36px; line-height: 36px; top: 90% !important; &:after { display: none !important; } } } div.portpolioList { button.btnMain { visibility: hidden !important; } p.listCtrl { visibility: hidden !important; } p.listLine { visibility: hidden !important; } div.pageNum { right: 50% !important; top: 75% !important; transform: translateX( -15px ); } div.logoBox { visibility: hidden !important; img { visibility: hidden !important; } } dl.texts { dt { font-size: 10px !important; } dd { font-size: 10px !important; } } ul.list { > li { float: left; div.img { img { width: 100%; transform: scale( 1.5 ); margin-top: 0px !important; } } } } ul.textList { dl.texts { left: 10px !important; right: 10px !important; bottom: 0px !important; em { display: none; } } } } } div.experienceIntro { height: 100%; &.hidden { visibility: hidden; } p.introText { color:#fff; /* position: absolute; left: 50%; top: 50%; width: 50%; margin-left: -25%; */ position: absolute; left: 10%; top: 50%; width: 80%; text-align: center; text-align: center; word-break: keep-all; // @media screen and ( max-width: @minWidth ) { // left: 0% !important; width: 100% !important; margin-left: 0% !important ; // } opacity: 0; .easeInOutQuad( @portpolioListDuration ) ; &.active { opacity: 1; } } p.bg { .fullScreen() ; background: url('../images/experience_bg01.jpg') no-repeat center center; background-size: cover; opacity: 0; .easeInOutQuad( @portpolioListDuration ) ; &.active { opacity: 1; } // @media screen and ( max-width: @minWidth ) { // background-position: 75% 0; // } } div.show { color:#89ffe0; position: absolute; left: 50%; top: 60%; transform: translateX( -50% ) translateY( -50% ); z-index: 2; cursor: pointer; -webkit-filter: blur(0); filter: blur(0); opacity: 0; .easeInOutQuad( @portpolioListDuration ) ; &.active { opacity: 1; } &:after { content: ''; display: block; background: url('../images/experience_arr.png') no-repeat left top; width: 6px; height: 11px; font-size: 0px; line-height: 0px; position: absolute; right: -15px; top: 50%; margin-top: -5.5px; } // @media screen and ( max-width: @minWidth ) { // color: #fff; // width: 80%; background: #000; text-align: center; height: 36px; line-height: 36px; // top: 90%; // &:after { display: none; } // } } } @scrollBgClr : #fff; @portpolioListDuration: .75s; div.portpolioList { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; visibility: hidden; opacity: 0; .easeInOutQuad( @portpolioListDuration ) ; &.show { visibility: visible; opacity: 1; z-index: 10; } button.btnMain { width: 31px; height: 30px; font-size: 0px; line-height: 0px; position: absolute; left: 41px; top: 41px; z-index: 10; outline: 0px; span { display: block; position: absolute; left: 0px; top: 15px; font-size: 0px; line-height: 0px; width: 100%; height: 1px; background-color: #fff; } &:before , &:after { content: ''; display: block; background: #fff; position: absolute; left: 0px; top: 15px; transform-origin: 0px 0px; width: 20px; height: 1px; } &:before { transform: rotate( 45deg ); } &:after { transform: rotate( -45deg ); } } /* end of button.btnMain */ button.btnMain_old { width: 31px; font-size: 0px; line-height: 0px; height: 1px; background-color: #fff; position: absolute; left: 29px; top: 41px; outline: 0px; z-index: 10; span { display: block; position: absolute; left: 0px; top: -15px; width: 100%; height: 30px; } &:before , &:after { content: ''; display: block; background: #fff; position: absolute; left: 0px; top: 0px; transform-origin: 0px 0px; width: 20px; height: 1px; } &:before { transform: rotate( 45deg ); } &:after { transform: rotate( -45deg ); } } /* end of button.btnMain_old */ div.pageNum { position: absolute; right: 120px; top: 49px; z-index: 500; opacity: 0; font-family: dotum; .easeInOutQuad(.45s) ; &.active { opacity: 1; } &:after { content: ''; display: block; position: absolute; width: 30px; height: 1px; line-height: 0px; font-size: 0px; background-color: #fff; transform: rotate( -45deg ); transform-origin: 0px 0px; left: 6px; top: 22px; opacity: .3; } span.crnt { color: #fff; font-size: 11px; position: absolute; left: 2px; top: -1px; } span.total { color: #fff; position: absolute; left: 19px; top: 12px; font-size: 11px; opacity: .5; } } p.listLine { @lineWidth: 3px; position: absolute; right: 0px; top: 0px; bottom: 0px; z-index: 10; width: @lineWidth; background-color: rgba( 0, 0, 0, .15 ); span.line { position: absolute; left: 0px; top: 0px; width: @lineWidth; background-color: #fff; .easeInOutQuad( .75s ) ; } } /* end of p.listLine */ div.logoBox { @logoBoxWidth: 170px; @logoBoxHeight: 50px; width: @logoBoxWidth; height: @logoBoxHeight; position: absolute; right: -40px; bottom: 61px; z-index: 10; transform: translateX( -50% ) translateY( -50% ) scale( 0.95 ); perspective: 350px; @media screen and ( max-width: 690px ) { div.top { visibility: hidden !important; } div.front { visibility: hidden !important; } div.bottom { visibility: hidden !important; } img { visibility: hidden !important; } } // &:hover div.linkWrap { transform: rotateY( 0deg ) rotateX( -90deg ); } &.up div.linkWrap { transform: rotateY( 0deg ) rotateX( 90deg ); } &.down div.linkWrap { transform: rotateY( 0deg ) rotateX( -90deg ); } div.linkWrap { transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY( 0deg ) rotateX( 0deg ); width: @logoBoxWidth; height: @logoBoxHeight; line-height: @logoBoxHeight; font-size: 12px; font-family: 'dotum'; color: #ba875c; text-align: left; // text-indent: 14px; &.anim { .easeInOutQuad(0.5s) ; } div.front { width: @logoBoxWidth; height: @logoBoxHeight; transform: rotateX( 0deg ) translateZ( @logoBoxHeight/2 ); position: absolute; left: 0px; top: 0px; backface-visibility: hidden; // background-color: #4e3927; img { position: absolute; visibility: hidden; &.active { position: static; visibility: visible; width: @logoBoxWidth; height: @logoBoxHeight; } } } div.top { width: @logoBoxWidth; height: @logoBoxHeight; position: absolute; left: 0px; bottom: 0px; transform-origin: center top 0px; transform: rotateX( 90deg ) translateY( -@logoBoxHeight/2 ); backface-visibility: hidden; // background-color: #4a3625; img { width: @logoBoxWidth; height: @logoBoxHeight; } } div.bottom { width: @logoBoxWidth; height: @logoBoxHeight; position: absolute; left: 0px; bottom: 0px; transform-origin: center bottom 0px; transform: rotateX( -90deg ) translateY( @logoBoxHeight/2 ); backface-visibility: hidden; // background-color: #4a3625; img { width: @logoBoxWidth; height: @logoBoxHeight; } } } } ul.textList { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; > li { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; visibility: hidden; &.active { visibility: visible; } dl.texts { position: absolute; left: 59px; bottom: 45px; font-family: dotum; font-size: 12px; color: #fff; height: 80px; .textShow { visibility: visible; } @media screen and ( max-width: 540px ) { dt { font-size: 10px !important; } dd { font-size: 10px !important; } } > dt , > dd { visibility: hidden; } > dt { padding-bottom: 10px; font-family: 'YGP770'; letter-spacing: 0.5px; font-size: 13px; } > dd { font-family: 'YGP730'; letter-spacing: 0.5px; font-size: 13px; opacity: 0.8; } } div.logo { position: absolute; right: 0px; bottom: 0px; } } } ul.list { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; .easeInOutQuad( .75s ) ; &.noanim { transition-duration: 0s !important; } > li { position: relative; height: 100%; box-sizing: border-box; div.contWrap { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; &.dongbu div.img img { margin-top: -130px; } &.ingLife {} &.shinhan {} &.noghyup div.img img { margin-top: -110px; } &.hanwha {} div.img { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) translateZ(0) scale( 1.0 , 1.0 ); } } } /* end of li */ } p.listCtrl { position: absolute; right: 64px; top: 50%; z-index: 10; transform: translateY( -50% ); width: 20px; // &:hover { // span.chkName { opacity: 1; } // } span.chkName { position: absolute; right: 32px; top: 0px; padding: 10px; background-color: #fff; border-radius: 5px; box-shadow: 0px 0px 3px rgba( 0, 0, 0, .4 ) ; transform: translateY( -10px ) ; font-size: 12px; text-align: center; opacity: 0; .easeInOutQuad( .25s ) ; em { display: block; height: 15px; line-height: 1.2; overflow: hidden; } &:after { content: ''; display: block; width: 0px; height: 0px; font-size: 0px; line-height: 0px; border: 3px solid transparent; border-left: 6px solid #fff; position: absolute; right: -9px; top: 50%; transform: translateY( -50% ); } &.active { opacity: 1; } } a { display: block; position: relative; width: 10px; height: 16px; font-size: 0px; line-height: 0px; margin: auto; opacity: .4; .easeInOutQuad( .4s ) ; &:after { content: ''; display: block; width: 0px; height: 0px; line-height: 0px; font-size: 0px; border: 2px solid #fff; border-radius: 100%; position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ) ; } &:hover , &.active { opacity: 1; } } } } /* end of portpolioList */ div.portpolioList_old { visibility: hidden; opacity: 0; z-index: 10; .fullScreen() ; // .easeInOutQuad( .75s ) ; .easeInOutQuad( @portpolioListDuration ) ; &.show { visibility: visible; opacity: 1; } button.btnMain { position: absolute; left: 10px; top: 10px; z-index: 50; border-top: 1px solid #fff; font-size: 0px; line-height: 0px; width: 15px; height: 15px; outline: 0px; &:before { content: ''; display: block; position: absolute; left: 0px; top: 4px; width: 100%; border-top: 1px solid #fff; } &:after { content: ''; display: block; position: absolute; left: 0px; top: 9px; width: 100%; border-top: 1px solid #fff; } } div.pageNum { position: absolute; right: 40px; top: 20px; z-index: 500; opacity: 0; .easeInOutQuad(.45s) ; &.active { opacity: 1; } &:after { content: ''; display: block; position: absolute; width: 17px; height: 1px; line-height: 0px; font-size: 0px; background-color: #fff; transform: rotate( -55deg ); transform-origin: 0px 0px; left: 6px; top: 22px; opacity: .5; } span.crnt { color: #fff; font-size: 9pt; } span.total { color: #fff; position: absolute; left: 15px; top: 13px; font-size: 9pt; opacity: .7; } } p.listLine { position: absolute; left: 0px; top: 0px; bottom: 0px; z-index: 10; width: 2px; span.line { position: absolute; left: 0px; top: 0px; width: 2px; background: lighten( @scrollBgClr , 30% ) ; .easeInOutQuad( .75s ) ; } } ul.textList { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; > li { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; visibility: hidden; &.active { visibility: visible; } dl.texts { position: absolute; left: 59px; bottom: 69px; font-family: dotum; font-size: 12px; color: #fff; .textShow { visibility: visible; } > dt , > dd { visibility: hidden; } > dt { font-weight: bold; padding-bottom: 10px; } > dd { } } div.logo { position: absolute; right: 0px; bottom: 0px; } } } ul.list { .fullScreen() ; .easeInOutQuad( .75s ) ; li { position: relative; height: 100%; div.contWrap { .fullScreen() ; overflow: hidden; /* 컬러코드 */ // &.dongbu { background-color: #16a083; } // &.ingLife { background-color: #f58220; } // &.shinhan { background-color: #045798; } // &.noghyup { background-color: #2b9f45; } // &.hanwha { background-color: #ff6600; } &.dongbu { div.img img { margin-top: -130px; } } &.ingLife {} &.shinhan {} &.noghyup { div.img img { margin-top: -110px; } } &.hanwha {} div.object { position: absolute; // border: 50px solid red; &.img { left: 50%; top:150%; transform: translateX(-50%) translateY(-50%) translateZ(0) scale( 1.0 , 1.0 ); // -webkit-filter: blur(0); // filter: blur(0); // .easeInOutQuad( .65s ) ; .easeInOutQuad( @portpolioImgDuration ) ; } &.texts { left: 0px; bottom: -70%; // .easeInOutQuad( .75s ) ; .easeInOutQuad( @portpolioTextsDuration ) ; dl { padding-left: 60px; padding-bottom: 70px; color: #fff; font-size: 12px; > dt { font-weight: bold; padding-bottom: 12px; } > dd { font-weight: normal; opacity: .7; } } } &.logo { right: 0px; bottom: -50%; // .easeInOutQuad( .85s ) ; .easeInOutQuad( @portpolioLogoDuration ) ; } } &.up { div.object.img { top: -40% !important; } div.object.texts { bottom: 100% !important; } div.object.logo { bottom: 100% !important; } } &.down { div.object.img { top: 150% !important; } div.object.texts { bottom: -70% !important; } div.object.logo { bottom: -20% !important; } } &.active { div.object { &.img { top: 50%; } &.texts { bottom: 0%; } &.logo { bottom: 0%; } } } } /* end of div.contWrap */ } } } /* end of portpolioList */ } } } /* div.subContWrap */ } /* end of div.subWrap */ } /* end of div.middleWrap */ div.mainBgWrap { .fullScreen() ; overflow: hidden; // ul.list { .fullScreen() ; > li { .fullScreen() ; color: #fff; opacity: 0; &.active { .easeInOutQuad(1s) ; } &.show { opacity: 1; } div.bgWrap { .fullScreen(); // background-color: #ccc; div.parallaxWrap { &.deep600 { perspective: 9000px; } position: absolute; left: 0; top: 0; width: 100%; height: 100%; .shape { transform: translateZ( 30px ) ; } } } div.shape { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; .fullScreen() ; &.sky { .over_fullScreen(); } &.field { z-index: 12; } &.tree { z-index: 12; } &.over { z-index: 12; } &.sunlights { z-index: 50; @imgWidth: 428px; @imgHeight: 511px; // margin-top: 310px; margin-left: 130px; margin-top: 280px; margin-left: -150px; @media screen and ( max-width: @minWidth ) { margin-top: 244px; margin-left: -137px; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale( .5 ) !important; } p.imgBox { position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) ; width: @imgWidth; height: @imgHeight; margin-left: -@imgWidth / 2; margin-top: -@imgHeight / 2; img { // border: 1px solid blue; position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ); } // &.lightc img { margin-top: 0%; transform: translateX( -50% ) translateY( -50% ) rotate( 150deg ); } &.lightc img { margin-top: 1%; margin-left: -17%; transform: translateX( -50% ) translateY( -50% ) rotate( -130deg ); } &.light1 img { margin-top: 10%; margin-left: -0%; } &.light2 img { margin-top: 17%; margin-left: -5%; } &.light3 img { margin-top: 27%; margin-left: -10%; opacity: .6; } &.light4 img { margin-top: 37%; margin-left: -20%; opacity: .5; } &.light5 img { margin-top: 47%; margin-left: -30%;opacity: .15; } &.light6 img { margin-top: 57%; margin-left: -40%; opacity: .1; } /* &.light1 img { margin-top: 10%; } &.light2 img { margin-top: 14%; } &.light3 img { margin-top: 27%; opacity: .6; } &.light4 img { margin-top: 37%; opacity: .5; } &.light5 img { margin-top: 47%; opacity: .4; } &.light6 img { margin-top: 57%; opacity: .3; } */ } } /* end of sunlights */ } &[data-time=morning] { div.shape { &.sky { background-image: url('../images/bg_main01_sky.png'); } &.field { background-image: url('../images/bg_main01_field.png'); } &.tree { background-image: url('../images/bg_main01_tree.png'); } &.over { background-image: url('../images/bg_main01_over.png'); } } } /* end of data-time=morning */ &[data-time=afternoon] { div.shape { &.sky { background-image: url('../images/bg_main02_sky.png'); } &.field { background-image: url('../images/bg_main02_field.png'); } &.tree { background-image: url('../images/bg_main02_tree.png'); } &.over { background-image: url('../images/bg_main02_over.png'); } } } /* end of data-time=afternoon */ &[data-time=night] { div.shape { &.sky { background-image: url('../images/bg_main03_sky.png'); } &.field { background-image: url('../images/bg_main03_field.png'); } &.tree { background-image: url('../images/bg_main03_tree.png'); } &.over { background-image: url('../images/bg_main03_over.png'); } } } /* end of data-time=night */ } } /* end of ul.list */ } /* end of div.bgWrap */ canvas.milkyWay { position: absolute; left: 0px; top: 0px; z-index: 10; width: 100%; height: 100%; animation: shining 5s infinite ease-in-out; @-webkit-keyframes shining { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } } canvas.milkyWay2 { position: absolute; left: 0px; top: 0px; z-index: 10; width: 100%; height: 100%; animation: shining 2s infinite ease-in-out; } @-webkit-keyframes shining { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } div.dandelionBox { position: absolute; left: 0px; top: 0px; z-index: 12; width: 100%; height: 100%; div.dandelion { @size: 6px; position: absolute; width: @size; height: @size; font-size: 0px; line-height: 0px; background-color: #fff; opacity: 1; background: url('../images/dandelion.png') no-repeat left top; background-size: contain; .easeInOutCirc( @dandelion-move-time ) ; animation: dandelion 2s infinite ease-in-out; @-webkit-keyframes dandelion { 0% { transform: rotate( 0deg ); } 50% { transform: rotate( 120deg ); } 100% { transform: rotate( 0deg ); } } } } div.mainBgLoadingBar { @gapSize: 50px; @mainBgLoadingBar_height: 50px; position: absolute; left: 0px; right: 0px; bottom: 5px; z-index: 100; height: @mainBgLoadingBar_height; div.cover { height: @mainBgLoadingBar_height; font-size: 0px; line-height: 0px; position: absolute; left: 50px; top: 0px; right: 50px; bottom: 0px; } /* div.cover { width: 100%; height: @mainBgLoadingBar_height; padding: 0px 160px 0px @gapSize; position: relative; font-size: 0px; line-height: 0px; } */ div.loading { display: inline-block; // position: relative; // width: 33.3%; position: absolute; left: 0px; top: 0px; width: 100%; height: 20px; &:hover { p.guageBg { background-color: rgba( 255, 255, 255, .1 ); // box-shadow: 0px 0px 10px #fff; } } p.guage { position: absolute; left: 0px; top: 50%; margin-top: -1px; height: 1px; width: 0px; background-color: #f60; opacity: .2; .ease( .1s ); } p.guageBg { width: 100%; height: 1px; background-color: rgba( 255, 255, 255, .1 ); position: absolute; top: 50%; margin-top: -1px; .easeInOutQuad(.1s) ; } &.step1 { // width: 33.4%; p.guage { background-color: #87ffe2; } } &.step2 { p.guage { background-color: #ffa025; } } &.step3 { p.guage { background-color: #ff87ae; } } } } p.copyright { display: none; position: absolute; left: 50%; bottom: 5px; z-index: 12; font-size: 11px; font-family: dotum; color: #fff; transform: translateX( -50% ); } div.btmOptions { position: absolute; left: 50px; bottom: 21px; z-index: 100; color: #fff; font-family: "Kroeger0553"; font-size: 10px; // opacity: .15; @media screen and (max-width: @minWidth ) { visibility: hidden; } div { display: inline-block; position: relative; width: 60px; vertical-align: middle; font-size: 10px; font-weight: bold; height: 14px; line-height: 14px; background-color: transparent; &:before { content: ''; display: block; position: absolute; left: 0px; top: 50%; margin-top: -4px; height: 9px; width: 1px; background: #2d5047; opacity: 0.3; } &.title { width: auto; opacity: 0.15; padding-right: 12px; cursor: default; &:before { display: none; } } &[data-set=recruit] { width: 50px; a { cursor: default !important; } &:hover { p.front { width: 100% !important; } } } &[data-set=download] { width: 70px; left: 5px; &:hover { p.front { width: 100% !important; } } } p { .easeInOutCirc( .5s ) ; position: absolute; left: 0px; top: 0px; overflow: hidden; a { padding-left: 5px; padding-right: 5px; } &.front { background: #87ffe2; width: 0%; a { color: #000; opacity: 1; display: block; } } &.back { width: 100%; a { color: #fff; opacity: 0.15; display: block; } } } } div.title {} } } /* end of div.mainWrap */ div.popupWrap { position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 900; display: none; &.active { display: block; } &:before { content: ''; display: block; background-color: rgba( 0, 0, 0, .4 ); position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 5; } div.popBox { min-width: 450px; min-height: 30px; background-color: #fff; border-radius: 5px; position: absolute; left: 50%; top: 50%; z-index: 10; transform: translateX( -50% ) translateY( -50% ) ; box-shadow: 0px 0px 10px rgba( 0, 0, 0, .5 ) ; div.titleBox { border-radius: 5px 5px 0px 0px; height: 40px; line-height: 40px; padding: 0px 10px; font-size: 11px; font-weight: bold; border-bottom: 1px solid #ccc; background-color: #eee; } div.descBox { padding: 25px 25px 0px 25px; min-height: 40px; .ta-l { text-align: center; } } div.btns { text-align: center; min-height: 30px; padding: 20px 0px ; > button { vertical-align: middle; &[data-type=close] { position: absolute; right: 10px; top: 13px; width: 15px; height: 15px; &:after { content: ''; display: block; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: transparent; } } > svg { width: 15px; height: 15px; vertical-align: top; } } .btn { width: 99px; height: 29px; display: inline-block; border: 1px solid #999; font-family: dotum; font-size: 12px; line-height: 29px; text-align: center; border-radius: 3px; margin: 0px 2px; outline: 0px; } } &.insertBox { input.title { border: 1px solid #ccc; height: 30px; line-height: 30px; width: 100%; margin-top: 10px; padding: 0px 10px; } textarea.desc {background: #eee; border: 0px; resize: none; width: 100%; height: 80px; line-height: 1.6; padding: 10px; margin-top: 10px; } } &.cropBox { @coverBoxGap : 150px; div.coverBox { position: absolute; right: -(@coverBoxGap + 10px); top: 0px; width: @coverBoxGap; height: @coverBoxGap; div.cont { width: @coverBoxGap; height: @coverBoxGap; img { width: 100%; height: 100%; } } } } } } // end of div.popupWrap @pageload_titleWidth: 480px; @pageload_title_duration: .3s; @pageload_hide_duration: .3s; div.pageload { position: fixed; left: 0px; top:0px; right: 0px; bottom: 0px; z-index: 999; opacity: 1; > .title { visibility: hidden; width: @pageload_titleWidth; font-size: 100px; color: #fff; font-weight: bold; position: absolute; left: -@pageload_titleWidth; bottom: 0px; z-index: 1000; } &.active { > .title { .easeInOutCirc( @pageload_title_duration ) ; left: 0px; } } &.hide { .easeInOutCirc( @pageload_hide_duration ) ; opacity: 0; } } div.tempImg { position: absolute; left: 0px; top: 0px; z-index: -1; width: 0px; height: 0px; img { width: 0px; height: 0px; visibility: hidden; } } /* 메인 배경 컨트롤러 */ div.bgController { position: absolute; right: 50px; bottom: 19px; z-index: 100; font-size: 11.66px; color: #fff; font-family: 'HN_Th'; &:hover { ul.list > li { opacity: 1 !important; } } button { position: absolute; width: 0px; height: 0px; font-size: 0px; line-height: 0px; outline: none; &[data-type=prev] { border: 3px solid transparent; border-bottom: 3px solid #fff; left: 50%; top: -11px; transform: translateX( -50% ); opacity: 0.2; &:after { content: ''; display: block; position: absolute; left: -50px; top: -10px; width: 100px; height: 22px; } &:hover { opacity: 1; border-bottom: 3px solid #87ffe2; } visibility: hidden; } &[data-type=next] { border: 3px solid transparent; transform: translateX(-50%); opacity: 0.2; // border-top: 3px solid #fff; // left: 50%; bottom: -12px; border-left: 3px solid #fff; right: -5px; top: 7px; &:after { content: ''; display: block; position: absolute; top: -12px; left: -115px; width: 115px; height: 22px; } &:hover { opacity: 1; // border-top: 3px solid #87ffe2; border-left: 3px solid #fff; } } } div.mask { width: 120px; height: 20px; overflow: hidden; position: relative; ul.list { position: absolute; left: 0px; top: 0px; right: 0px; top: 0px; font-family: "Kroeger0553" !important; text-transform: uppercase; font-size: 10px; &.anim { .easeInOutQuad(0.5s) ; } > li { width: 100%; height: 20px; line-height: 20px; text-align: center; opacity: 0.3; letter-spacing: 1px; em { color: #82ffe6; } &:hover , &.active { opacity: 1; } } } } } /* end of div.bgController */ div.linkExperienceWrap { display: block; position: absolute; left: 50%; bottom: 25%; transform: translateX( -50% ); width: 60%; height: 30px; line-height: 30px; color: #ba875c; div.linkExperience { @linkExperienceWidth: 160px; @linkExperienceHeight: 36px; width: @linkExperienceWidth; height: @linkExperienceHeight; position: absolute; left: 50px; top: 50%; transform: translateX( -50% ) translateY( -50% ) scale( 0.95 ); perspective: 350px; margin-left: 14px; // &:hover { &.active { div.linkWrap { transform: rotateY( 0deg ) rotateX( -90deg ); } } div.linkWrap { transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY( 0deg ) rotateX( 0deg ); width: @linkExperienceWidth; height: @linkExperienceHeight; line-height: @linkExperienceHeight; font-size: 12px; font-family: 'dotum'; color: #ba875c; text-align: left; text-indent: 14px; .easeInOutQuad(0.5s) ; div:before , div:after { content: ''; display: block; font-size: 0px; line-height: 0px; width: 5px; height: 1px; background: #a59b92; position: absolute; } div:before { right: 16px; top: 14px; transform-origin: -2px top; transform: rotate( 45deg ); } div:after { right: 18px; top: 18px; transform-origin: 100% 100%; transform: rotate( -45deg ); } div.front { width: @linkExperienceWidth; height: @linkExperienceHeight; transform: rotateX( 0deg ) translateZ( @linkExperienceHeight/2 ); position: absolute; left: 0px; top: 0px; backface-visibility: hidden; background-color: #4e3927; .link { color: #ba875c; } } div.back { width: @linkExperienceWidth; height: @linkExperienceHeight; position: absolute; left: 0px; bottom: 0px; transform-origin: center top 0px; transform: rotateX( 90deg ) translateY( -@linkExperienceHeight/2 ); backface-visibility: hidden; background-color: #4a3625; .link { color: #ba875c; } } } } } p.pointBox { &.fixed { left: 50% !important; top: 50% !important; } } div#daa-ribbon { position: absolute; right: 20px; top: 0px; width: 60px; height: 145px; overflow: hidden; background: url("https://d1tzsre8044e9p.cloudfront.net/wp-content/themes/daa/images/badge_white.png") top left no-repeat; z-index: 99999; display: none; @media screen and (max-width: @minWidth ) { transform: scale( 0.5 ); transform-origin: right top; } a { display: block; width: 100%; height: 100%; opacity: 0; } } div#awwwards { @media screen and (max-width: @minWidth ) { transform: scale(.5); transform-origin: left top; } }