/* A A A : A : A : A : */ #LeftLogo_simpleNavi { width : 100%; height : auto; background : #f7f7f7; text-align : center; padding : 0; position : sticky; top : 0; z-index : 3; transition : .5s; } #LeftLogo_simpleNavi .navTop { width : 100%; height : auto; background : #b77878; } #LeftLogo_simpleNavi .navTop .topWrap { width : 90%; margin : 0 auto; } #LeftLogo_simpleNavi .navTop p { font-size : clamp(13px,1.5vw,15px); color : #fff; text-align : right; line-height : 1em; padding : 0.3em 0;} #LeftLogo_simpleNavi .navWrap { width : 100%; height : auto; display : inline-block; max-width : 1300px; } #LeftLogo_simpleNavi .navWrap .loginBar { width : 100%; height : auto; display : flex; justify-content : flex-end; } #LeftLogo_simpleNavi .navWrap .loginBar li { width : calc(85px + 2.5vw); text-align : right; } #LeftLogo_simpleNavi .navWrap .loginBar li a { font-size : calc(14px + 0.1vw); color : #000; line-height : 3em; transition : .5s; } #LeftLogo_simpleNavi .navWrap .loginBar li a:hover { color : #ffffff9e; transition : .5s; } #LeftLogo_simpleNavi .navWrap .loginBar li a img { width : calc(25px + 0.2vw); height : calc(20px + 0.2vw); vertical-align : sub; margin-right : 5%; } #LeftLogo_simpleNavi .navWrap .mainNav { width : 90%; height : auto; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; } #LeftLogo_simpleNavi .navWrap .mainNav .logoBox { width : auto; height : auto; text-align : left; } #LeftLogo_simpleNavi .navWrap .mainNav .logoBox img { width : 115px; height : auto; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList { width : 100%; height : auto; display : flex; justify-content : flex-end; align-items : flex-end; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList { width : auto; height : auto; position : relative; margin-left : 6%; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .mainList_a { width : auto; height : 100%; display : inline-block; font-size : calc(14px + 0.1vw); color : #000; line-height : 4em; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList:hover .mainList_a { color : #b77878; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList { width : 120%; height : auto; position : absolute; top : 100%; left : 20%; text-align : left; background : #f7f7f7; pointer-events : none; opacity : 0; padding : 5% 0; transition : .5s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList:hover .subNavList { opacity : 1; pointer-events : auto; transition : .5s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList li { width : 100%; height : auto; padding : 5% 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList li a { font-size : calc(13px + 0.1vw); color : #0000009e; padding : 0 10%; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList .mainList .subNavList li a:hover { color : #000; padding : 0 15%; transition : .3s; } /***********모바일 버전 메뉴***********/ #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn { width : auto; height : auto; display : none; flex-direction : column; justify-content : center; cursor : pointer; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn span { width : 24px; height : 3px; background : #70685e; display : block; transition : .2s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn span:nth-child(2) { margin : 5px 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn:hover span:nth-child(2) { margin : 8px 0; transition : .2s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobileCloseWrap { width : 100vw; height : 100vh; position : fixed; top : 0; left : 0; z-index : -1; display : none; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap { width : 380px; height : 100%; background : #000; position : fixed; top : 0; right : -100%; padding : 140px 70px 0; z-index : 5; transition : .5s; display : none;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap.on { width : 380px; height : 100%; background : #000; position : fixed; top : 0; right : 0; padding : 140px 70px 0; z-index : 5; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_closeBtn { font-size : 30px; color : #fff; position : absolute; top : 40px; right : 35px; cursor : pointer; transition : .3s; z-index : 6; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_closeBtn:hover { color : #ffffff9e; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_logo { width : auto; height : auto; margin-bottom : 60px; text-align : left; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_logo img { width : 160px; height : auto; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav { width : 100%; height : auto; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList { width : 100%; height : auto; font-size : 16px; color : #fff; text-align : left; position : relative; cursor : pointer; transition : .3s; padding : 4px 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList.active ,#LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList.active:hover { color : #fff000;} #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList.active::after { content : "▲"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList:hover { color : #ffffff9e; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList::after { content : "▼"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList { width : 100%; height : auto; padding : 5px 0; max-height : 0px; overflow : hidden; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li { width : calc(100% / 2); height : auto; padding : 5px 0; float : left; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #ffffff9e; font-size : 14px; font-weight : 300; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a:hover { color : #fff; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar { width : 240px; height : auto; border-top : 3px solid #ffffff9e; position : absolute; bottom : 0; left : 70px; display : flex; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar li { width : 120px; height : auto; padding : 30px 0 60px; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar li a { font-size : 16px; color : #ffffff9e; transition : .3s; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar li a:hover { color : #fff; transition : .3s; } .RotateWrap { display : none; } .RotateBg { background-image:url('./rotate/Rotate_Bg.png'); background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; height:auto; display:inline-block; position:relative;} @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #LeftLogo_simpleNavi .navWrap .mainNav .logoBox { padding : 2% 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList { display : none; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn { display : flex; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap { display : block;} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #LeftLogo_simpleNavi .navWrap .mainNav .logoBox { padding : 3% 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mainNavList { display : none; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_naviBtn { display : flex; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 30% 10% 0; right : -140%; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap.on { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 30% 10% 0; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_closeBtn { top : 20px; right : 20px; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_logo { margin-bottom : 20%; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar { width : 100%; position : static; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_loginBar li { width : 50%; padding : 5% 0 15%; } #LeftLogo_simpleNavi .navWrap .mainNav .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #e5e5e5; transition : .0s; } .RotateWrap { display : inline-block !important; width:70px; height:92px; overflow:hidden; text-align:right; top:83px; right:0px; position:absolute; z-index:9999999; transition : all 1s; -o-transition : all 1s; -ms-transition : all 1s; -moz-transition : all 1s; -webkit-transition : all 1s; } .RotateBg { background-image:url('./rotate/Rotate_Bg.png'); background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; height:auto; display:inline-block; position:relative;} .RotateBg {-webkit-animation: tel_jery 5s infinite linear; animation: tel_jery 5s infinite linear } @-webkit-@keyframes tel_jery { 0% { -webkit-transform : rotateZ(0deg); -webkit-transform-origin : 50% 50%; } 100% { -webkit-transform : rotateZ(360deg); } } @keyframes tel_jery { 0% { transform : rotateZ(0deg); transform-origin : 50% 50%; } 100% { transform: rotateZ(360deg); } } }