/*layout css*/ /*홈페이지 기본 크기*/ body{color:#000000;} body .account_login{ line-height: normal;} .USER_CONTENT { clear:both; } #OKwrapper {position:relative; width:1010px; margin:0 auto; } #OKwrapperHD{position:relative; width:100%;} .DSGN_WIDGET_WRAP{ font-size: 13px;} .DSGN_WIDGET_WRAP *{ line-height: inherit;} .DSGN_WIDGET_WRAP label{ margin-bottom: inherit;} .DSGN_WIDGET_WRAP ,.DSGN_WIDGET_WRAP:AFTER ,.DSGN_WIDGET_WRAP:BEFORE ,.DSGN_WIDGET_WRAP * ,.DSGN_WIDGET_WRAP *:AFTER ,.DSGN_WIDGET_WRAP *:BEFORE{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} /****************레이아웃1******************/ .LAYOUT-1 .POSITION_TOP {width:893px; min-height:60px; _height:60px; margin-bottom:5px;} .LAYOUT-1 .POSITION_LEFT {width:170px; float:left; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-1 .POSITION_CENTER {width:697px; float:right; margin-bottom:5px; margin-right:5px; min-height:400px; _height:400px;} /*.LAYOUT-1 .POSITION_CENTER img{max-width:600px;} 컨텐츠에 영향을 줘서 주석처리 2018.12.12 박혜영*/ .LAYOUT-1 .POSITION_RIGHT {display:none;} .LAYOUT-1 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} /*레이아웃1 사용자화면*/ .USER_CONTENT .LAYOUT-1 .POSITION_TOP {width:100%; margin-bottom:10px;} .USER_CONTENT .LAYOUT-1 .POSITION_LEFT {width:190px;} .USER_CONTENT .LAYOUT-1 .POSITION_CENTER {width:800px; margin-right:0;} .USER_CONTENT .LAYOUT-1 .POSITION_BOTTOM {width:100%;} /****************레이아웃2******************/ .LAYOUT-2 .POSITION_TOP {width:893px; min-height:60px; _height:60px; margin-bottom:5px;} .LAYOUT-2 .POSITION_LEFT {width:170px; float:left; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-2 .POSITION_CENTER {width:501px; float:left; margin-left:5px; margin-bottom:5px; min-height:400px; _height:400px;} .LAYOUT-2 .POSITION_RIGHT {width:170px; float:right; min-height:400px; _height:400px; margin-bottom:5px; margin-right:5px;} .LAYOUT-2 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} /*레이아웃2 사용자화면*/ .USER_CONTENT .LAYOUT-2 .POSITION_TOP {width:100%; margin-bottom:10px;} .USER_CONTENT .LAYOUT-2 .POSITION_LEFT {width:190px;} .USER_CONTENT .LAYOUT-2 .POSITION_CENTER {width:610px; margin-left:10px;} .USER_CONTENT .LAYOUT-2 .POSITION_RIGHT {width:190px; margin-right:0px;} .USER_CONTENT .LAYOUT-2 .POSITION_BOTTOM {width:100%;} /****************레이아웃3******************/ .LAYOUT-3 .POSITION_TOP {width:893px; min-height:100px; _height:100px; margin-bottom:5px;} .LAYOUT-3 .POSITION_LEFT {display:none;} .LAYOUT-3 .POSITION_CENTER {width:893px; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-3 .POSITION_RIGHT {display:none;} .LAYOUT-3 .POSITION_BOTTOM {clear:both; width:893px; min-height:100px; _height:100px;} /*레이아웃3 사용자화면*/ .USER_CONTENT .LAYOUT-3 .POSITION_TOP {width:100%; margin-bottom:10px;} .USER_CONTENT .LAYOUT-3 .POSITION_CENTER {width:100%;} .USER_CONTENT .LAYOUT-3 .POSITION_BOTTOM {width:100%;} /****************레이아웃4******************/ .LAYOUT-4 .POSITION_TOP {width:697px; float:right; min-height:60px; _height:60px; margin-bottom:5px;} .LAYOUT-4 .POSITION_LEFT {width:170px; float:left; min-height:480px; _height:500px; margin-bottom:5px;} .LAYOUT-4 .POSITION_CENTER {width:697px; float:right; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-4 .POSITION_RIGHT {display:none;} .LAYOUT-4 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} /*레이아웃4 사용자화면*/ .USER_CONTENT .LAYOUT-4 .POSITION_TOP {width:800px; margin-bottom:10px;} .USER_CONTENT .LAYOUT-4 .POSITION_LEFT {width:190px;} .USER_CONTENT .LAYOUT-4 .POSITION_CENTER {width:800px;} .USER_CONTENT .LAYOUT-4 .POSITION_BOTTOM {width:100%;} /****************레이아웃5******************/ .LAYOUT-5 .POSITION_TOP {width:893px; min-height:60px; _height:60px; margin-bottom:5px;} .LAYOUT-5 .POSITION_LEFT {width:170px; float:right; min-height:400px; _height:400px; margin-bottom:5px; margin-right:5px; } .LAYOUT-5 .POSITION_CENTER {width:697px; float:left; margin-right:5px; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-5 .POSITION_RIGHT {display:none;} .LAYOUT-5 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} /*레이아웃5 사용자화면*/ .USER_CONTENT .LAYOUT-5 .POSITION_TOP {width:100%; margin-bottom:10px;} .USER_CONTENT .LAYOUT-5 .POSITION_LEFT {width:190px; margin-right:0;} .USER_CONTENT .LAYOUT-5 .POSITION_CENTER {width:800px;} .USER_CONTENT .LAYOUT-5 .POSITION_BOTTOM {width:100%;} /****************레이아웃6******************/ .LAYOUT-6 .POSITION_TOP {width:697px; float:left; min-height:60px; _height:60px; margin-bottom:5px;} .LAYOUT-6 .POSITION_LEFT {width:170px; float:right; min-height:480px; _height:500px; margin-bottom:5px;margin-right:5px;} .LAYOUT-6 .POSITION_CENTER {width:697px; float:left; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-6 .POSITION_RIGHT {display:none;} .LAYOUT-6 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} .USER_CONTENT .LAYOUT-6 .POSITION_TOP {width:800px;} .USER_CONTENT .LAYOUT-6 .POSITION_CENTER {width:800px;} .USER_CONTENT .LAYOUT-6 .POSITION_LEFT {width:190px; margin-right:0;} .USER_CONTENT .LAYOUT-6 .POSITION_BOTTOM {width:100%;} /****************레이아웃7******************/ .LAYOUT-7 .POSITION_TOP {width:697px; float:left; min-height:60px; _height:60px; margin-bottom:5px;} .LAYOUT-7 .POSITION_LEFT {width:170px; float:right; min-height:480px; _height:500px; margin-bottom:5px; margin-right:5px;} .LAYOUT-7 .POSITION_CENTER {width:501px; float:right; min-height:400px; _height:400px; margin-bottom:5px; margin-right:6px;} .LAYOUT-7 .POSITION_RIGHT {width:170px; float:left; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-7 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} .USER_CONTENT .LAYOUT-7 .POSITION_TOP {width:800px;} .USER_CONTENT .LAYOUT-7 .POSITION_LEFT {width:190px; margin-right:0px;} .USER_CONTENT .LAYOUT-7 .POSITION_CENTER {width:600px; margin-right:10px;} .USER_CONTENT .LAYOUT-7 .POSITION_RIGHT {width:190px;} .USER_CONTENT .LAYOUT-7 .POSITION_BOTTOM {width:100%;} /****************레이아웃8******************/ .LAYOUT-8 .POSITION_TOP {width:697px; float:right; min-height:60px; _height:60px; margin-bottom:5px; margin-right:5px;} .LAYOUT-8 .POSITION_LEFT {width:170px; float:left; min-height:480px; _height:500px; margin-bottom:5px;} .LAYOUT-8 .POSITION_CENTER {width:501px; float:left; min-height:400px; _height:400px; margin-bottom:5px; margin-left:6px;} .LAYOUT-8 .POSITION_RIGHT {width:170px; float:right; min-height:400px; _height:400px; margin-bottom:5px; margin-right:5px;} .LAYOUT-8 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} .USER_CONTENT .LAYOUT-8 .POSITION_TOP {width:795px; margin-left:10px;} .USER_CONTENT .LAYOUT-8 .POSITION_LEFT {width:190px;} .USER_CONTENT .LAYOUT-8 .POSITION_CENTER {width:600px; margin-left:10px;} .USER_CONTENT .LAYOUT-8 .POSITION_RIGHT {width:190px;margin-left:0px;} .USER_CONTENT .LAYOUT-8 .POSITION_BOTTOM {width:100%;} /****************레이아웃9******************/ .LAYOUT-9 .POSITION_TOP {width:893px; min-height:60px; _height:60px; margin-bottom:5px;} .LAYOUT-9 .POSITION_LEFT {width:170px; float:right; min-height:400px; _height:500px; margin-bottom:5px; margin-right:5px;} .LAYOUT-9 .POSITION_CENTER {width:501px; float:left; min-height:400px; _height:400px; margin-bottom:5px;} .LAYOUT-9 .POSITION_RIGHT {width:170px; float:right; min-height:400px; _height:400px; margin-bottom:5px; margin-right:6px;} .LAYOUT-9 .POSITION_BOTTOM {clear:both; width:893px; min-height:60px; _height:60px;} .USER_CONTENT .LAYOUT-9 .POSITION_TOP {width:100%; margin-bottom:10px;} .USER_CONTENT .LAYOUT-9 .POSITION_LEFT {width:190px; margin-right:0px;} .USER_CONTENT .LAYOUT-9 .POSITION_CENTER {width:600px; margin-right:0px;} .USER_CONTENT .LAYOUT-9 .POSITION_RIGHT {width:190px; margin-right:10px;} .USER_CONTENT .LAYOUT-9 .POSITION_BOTTOM {width:100%;} /**************** 레이아웃10 ******************/ .USER_CONTENT .LAYOUT-10 .POSITION_TOP {width:100%;} .USER_CONTENT .LAYOUT-10 .POSITION_LEFT{width:23%; float:left} .USER_CONTENT .LAYOUT-10 .POSITION_CENTER{width:75%;float:right} .USER_CONTENT .LAYOUT-10 .POSITION_BOTTOM {width:100%;} /**************** 레이아웃11 ******************/ .USER_CONTENT .LAYOUT-11 .POSITION_TOP {width:100%;} .USER_CONTENT .LAYOUT-11 .POSITION_CENTER{min-height:calc( 100vh - 258px); } .USER_CONTENT .LAYOUT-11 .POSITION_BOTTOM {width:100%;} /**************** 레이아웃12 ******************/ .USER_CONTENT .LAYOUT-12 .POSITION_TOP {width:100%;} .USER_CONTENT .LAYOUT-12 .POSITION_LEFT{width:23%; float:right} .USER_CONTENT .LAYOUT-12 .POSITION_CENTER{width:75%;float:left} .USER_CONTENT .LAYOUT-12 .POSITION_BOTTOM {width:100%;} /*카페 디자인 마법사*/ .Admin_Body .CAFE .CAFE_LEFT {width:22%; float:left; min-height:400px; _height:400px; margin-bottom:5px;} .Admin_Body .CAFE .CAFE_CENTER {width:72%; float:right; margin-bottom:5px; min-height:400px; _height:400px;} /* 확장형 */ .wrap_centerHD{position:relative; width:100%;} .wrap_center{position:relative; width:1140px; margin:10px auto;} .DSGN_WIDGET_WRAP , .DSGN_WIDGET_WRAP .loginBtn, .DSGN_WIDGET_WRAP .shuvic_toolbar{font-size: 12px !important;} /* 24.08.05 로그인창 리뉴얼 */ .mem_card_reform .loginBtn {padding: 0.75rem 1rem;} .mem_card_reform .kakao_login_wrap {position: relative;} .mem_card_reform .kakao_info_text {color: #adadad; margin-top: 0.5rem; font-weight: 500; display: none; position: absolute;} .mem_card_reform .kakao_login_wrap > a:hover + .kakao_info_text {display: block;} .mem_card_reform .kakao_info_text > ul > li:first-child {vertical-align: top; width: 24px;} .mem_card_reform .kakao_login_wrap {margin-top: 0.5rem;} .mem_card_reform .kakao_login_wrap > a {display: block; text-align: center; background-color: #fee500; padding: 1.5px 0;} .mem_card_reform .kakao_login_wrap > a > img {display: block; margin: 0 auto;} .mem_card_reform .sec_gud {margin-top: 5rem;} .mem_card_reform .mv_form_lst_outer ul > li > a {border: 0;} .mem_card_reform .mv_form_lst_outer ul {display: block; text-align: center;} .mem_card_reform .mv_form_lst_outer ul > li {display: inline-block;} .mem_card_reform .mv_form_lst_outer ul > li:first-child > a:after {content: ""; display: inline-block; width: 1.5px; height: 1.25rem; vertical-align: middle; background-color: #e0e0e0; margin-left: 30px;} .mem_card_reform .area_gud .area_btn a {border: 0; background-color: transparent; text-decoration: underline;}