@charset "utf-8";

/* 컬러 선택 창 */
.sel_color_wrap { position: fixed; right: -2px; top: 16px; width: 62px; background: #fff; border: 2px solid #bbb; box-shadow: 0 0 6px rgba(0,0,0,.3); border-radius: 12px 0 0 12px; z-index: 2000; overflow: hidden;}
.sel_color_wrap .now_color { position: relative; display: block; height: 47px; margin: 10px 8px 7px 7px; overflow: hidden; transition: .3s all ease;}
.sel_color_wrap .now_color:active { transform: rotate(-90deg);}
.sel_color_wrap .now_color > span { position: relative; display: block; width: 47px; height: 47px; background: url(images/bg_now_color.png) no-repeat 0 0;}
.sel_color_wrap .now_color > div { position: absolute; left: 0; bottom: 0; display: block; width: 26px; height: 26px; transform: rotate(-45deg);}
.sel_color_wrap .now_color > div > b { display: block; height: 13px;}
.sel_color_wrap .sel_color { position: relative; padding: 5px 0 10px; border-top: 2px solid #ebebeb;}
.sel_color_wrap .sel_color li { position: relative; padding: 5px 0;}
.sel_color_wrap .sel_color li a { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; margin: 0 auto;}
.sel_color_wrap .sel_color li a:after { content: ""; display: block; clear: both;}
.sel_color_wrap .sel_color li a > span { display: block; float: left; width: 50%; height: 40px;}
.sel_color_wrap .sel_color li a:hover { opacity: .8;}
.sel_color_wrap .sel_color li a.on:before { position: absolute; right: 3px; top: 22px; content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #000;}

.sel_color_wrap .color_setting { position: absolute; left: 4px; top: 4px; display: block; width: 21px; height: 21px; background: url(images/btn_color_setting.png) no-repeat 0 0; text-indent: -9999px; z-index: 1001;}

/* 레이아웃 정보 표시 창 */
#sitepage { position: fixed; right: 16px; bottom: 0; width: 200px; background: rgba(0,0,0,.7); box-shadow: 0 0 10px rgba(0,0,0,.5); border-radius: 10px 10px 0 0; z-index: 2000; overflow: hidden; color: #ddd;}
#sitepage > a { position: relative; display: block; color: #fff; text-align: center; padding: 7px; font-weight: bold; background: rgba(0,0,0,.3); font-size: 14px;}
.sitepage_info { padding: 10px;}
.sitepage_top { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #666; font-family: Tahoma, sans-serif; font-size: 12px; letter-spacing: 0;}
.sitepage_top a { color: #5ef31e; text-decoration: underline; letter-spacing: 0;}
.sitepage_con { font-size: 12px; letter-spacing: 0; font-family: 'Operator Mono', 'Source Code Pro', Menlo, Monaco, Consolas, Courier New, monospace;}
.sitepage_con h4 { margin-bottom: 5px; color: #fff; font-size: 13px; letter-spacing: -0.06em; font-family: 맑은고딕, Malgun Gothic, Apple SD Gothic Neo, 돋움, Dotum, Droidsans, AppleSDGothic, Arial, sans-serif;}

/* 날씨 */
.weather_box { position:relative; width: 180px; height: 32px; overflow: hidden;}
.weather_box.wt01 { margin-right: -3px;}
.weather_box.wt02 { float: left;}
.weather_box.wt03 { width: 160px; height: 60px;}
.weather_box.wt03 .bx-viewport { height: 60px !important;}
.weather_box .bx-controls { display:none;}
.weather_box > a { position: absolute; bottom: 2px; font-size: 9px; color: #999; z-index: 100;}
.weather_box > a:hover { text-decoration: underline;}
.weather_box.wt01 > a { right: 30px;}
.weather_box.wt02 > a { left: 32px;}
.weather_box.wt03 > a { z-index: 1; font-size: 11px;}

.weather_box .icon_w { position: relative; padding-top: 3px;}
.weather_box.wt01 .icon_w { text-align: right; font-size: 13px;}
.weather_box.wt02 .icon_w { font-size: 11px;}
.weather_box.fcw .icon_w { color: #fff;}
.weather_box .icon_w > span { display: inline-block; width: 30px; height: 30px; text-indent: -9999px; vertical-align: top; margin-left: 2px; margin-top: -2px; text-align: left;}
.weather_box.ico01 .icon_w > span { background:url(images/icon_weather01.png) no-repeat 0 0;}
.weather_box.ico02 .icon_w > span { background:url(images/icon_weather02.png) no-repeat 0 0;}
.weather_box .icon_w > span.iw01 { background-position: 0 0;}
.weather_box .icon_w > span.iw02 { background-position: -30px 0;}
.weather_box .icon_w > span.iw03 { background-position: -60px 0;}
.weather_box .icon_w > span.iw04 { background-position: -90px 0;}
.weather_box .icon_w > span.iw05 { background-position: -120px 0;}
.weather_box .icon_w > span.iw06 { background-position: -150px 0;}
.weather_box .icon_w > span.iw07 { background-position: -180px 0;}

.weather_box.wt03 b { display: block; font-size: 15px; color: #424754; font-weight: bold;}
.weather_box.wt03 b:first-child { margin-bottom: -2px;}
.weather_box.wt03 i { font-style: normal; font-size: 14px; color: #424754; font-weight: bold;}
.weather_box.wt03 .wtxt_red { color: #d25248;}
.weather_box.wt03 .wtxt_blue { color: #4879d2;}
.weather_box.wt03 .wtxt_green { color: #01cc97;}
.weather_box.wt03 .wtxt_black { color: #000;}
.weather_box.ico03 .icon_w > span { position: absolute; right: 0; top: 5px; width: 50px; height: 50px; background:url(images/icon_weather03.png) no-repeat 0 0;}
.weather_box.ico03 .icon_w > span.iw01 { background-position: 0 0;}
.weather_box.ico03 .icon_w > span.iw02 { background-position: -50px 0;}
.weather_box.ico03 .icon_w > span.iw03 { background-position: -100px 0;}
.weather_box.ico03 .icon_w > span.iw04 { background-position: -150px 0;}
.weather_box.ico03 .icon_w > span.iw05 { background-position: -200px 0;}
.weather_box.ico03 .icon_w > span.iw06 { background-position: -250px 0;}
.weather_box.ico03 .icon_w > span.iw07 { background-position: -300px 0;}

/* 스킨박스 */
.skin_out_box { background: #fff; padding: 25px; box-shadow: 0 0 3px rgba(0,0,0,.2);}
.skin_out_box.br { border-radius: 7px;}

/* box frame */
.bf32 { position: relative; display: block;}
.bf32:before { content: ""; display: block; padding-top: 66.7%;}
.bf169 { position: relative; display: block;}
.bf169:before { content: ""; display: block; padding-top: 56.3%;}
.bfbox { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: 1;}
.bfbox img { width: 100%; height: 100%;}