@charset "utf-8";

/**
 * common
 */
/**
* img, a, button, select, input, textarea, font, table 등의 스타일을 선언해두었습니다.
*/

/* default */
/* default 영역은 수정하지 마세요 */
a {text-decoration:none; }
a:hover, a:focus,
button:hover, button:focus,
select:hover, select:focus,
input:hover, input:focus,
textarea:hover, textarea:focus {outline:none; text-decoration:none; }
button {background:none; border:none; cursor:pointer;}
p, span, h3, h4, h5, li {word-break:keep-all;}


/**
* common
*/
/* basic */
.group {position:relative; box-sizing:border-box;}
.group:after {display:block; clear:both; content:"";}
ul.group > li,
ol.group > li {float:left;}
.group > .left {float:left;}
.group > .right {float:right;}

/* flex */
.flex-wrap{position:relative;display:flex;}
.flex {display:flex;}
.flex.ai-top{align-items: flex-start;}
.flex.ai-center{align-items:center;}
.flex.ai-bottom{align-items: flex-start;}

/* 반응형 속성 */
.pc_hidden{display:none !important; }


/**
* effect
*/
.effect,
.effect:after {
    transition:all 0.4s ease-in-out;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    -ms-transition:all 0.4s ease-in-out}

.effect .effecton{opacity:0;
    transition:opacity 0.4s ease-in-out;
    -webkit-transition:opacity 0.4s ease-in-out;
    -moz-transition:opacity 0.4s ease-in-out;
    -o-transition:opacity 0.4s ease-in-out;
    -ms-transition:opacity 0.4s ease-in-out}
.effect:hover .effecton{opacity:1}


/**
* box
*/
.box {box-sizing:border-box; background-color: #fff;}
.box.box-radius {border-radius:6px;} /* 라운딩이 들어가는 박스 */
.box.box-shadow {box-shadow:8px 8px 8px rgba(0,0,0,0.1)} /* 그림자가 들어가는 박스 */
.box.box-border {border:1px solid #ddd;}/* 선이 들어가는 박스 */
.box.box-line {background-image:linear-gradient(-45deg, transparent 40%, #dedede 40%, #dedede 50%, transparent 50%, transparent 90%, #dedede 90%); background-size: 6px 6px;}/* 빗금이 들어가는 박스 */
.box.gray {background-color:#f5f5f5;}
.img-box > img {width: 100%;}
/**
* text
*/
/* color */
.primary {color:#733938 !important;}
.secondary {color:#e18a71 !important;}
.third {color:#f9a825 !important;}/* primary, secondary 외 간혹 포인트를 이용해야하는 경우 */
.success {color:#00c853 !important;}
.warning {color:#ec407a !important;}
.disabled {color:#ddd !important;}


.txt.black {color:#222 !important;}
.txt.white {color:#fff !important;}



/* size */
.txt {line-height:130%;}

/* 제목 영역에 사용됩니다. */
.txt.big{font-size:7.8rem !important;}
.txt.tit {font-size:4.8rem !important;}/* 제목인 경우 사용 */
.txt.subtit {font-size:2.2rem !important;}/* 부제목인 경우 사용 */

/* 콘텐츠 영역에 사용됩니다. */
.txt.huge {font-size:3.8rem !important;}/* 폰트 사이즈가 가장 큰 경우 */
.txt.large {font-size:2.8rem !important;}/* 폰트 사이즈가 큰 경우 */
.txt.midium {font-size:2.4rem !important;}/* 폰트 사이즈가 일반적인 경우 */
.txt.normal {font-size:2.0rem !important;}/* 폰트 사이즈가 일반적인 경우 */
.txt.small {font-size:1.8rem !important;}/* 폰트 사이즈가 작은 경우 */
.txt.tiny {font-size:1.4rem !important;}/* 폰트 사이즈가 가장 작은 경우 */

/* style */

.txt.thin {font-weight:300 !important;}/* heading 요소 이외에 얇은 서체를 이용해야하는 경우 수정 */
.txt.medium{font-weight:500 !important;}
.txt.bold {font-weight:600 !important;}
.txt.bolder {font-weight:800}/* bold보다 강조를 해야하는 경우 */

/* 줄바꿈 */
/* contarea의 row 사용 시 해당 요소에 height 잡아줘야함 */
.ellipsis {display:inline-block; max-width:85%;overflow:hidden; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; word-wrap: break-word;  word-break: break-all;}
.ellipsis.row2 {height:4rem; display:-webkit-box; white-space:normal;word-break: normal;-webkit-box-orient:vertical;-webkit-line-clamp:2} /* height 값 조정 */
.ellipsis.row3 {height:6rem; display:-webkit-box; white-space:normal;word-break: normal;-webkit-box-orient:vertical;-webkit-line-clamp:3} /* height 값 조정 */
.ellipsis.row4 {height:8rem; display:-webkit-box; white-space:normal;word-break: normal;-webkit-box-orient:vertical;-webkit-line-clamp:4} /* height 값 조정 */

/**
* background-color
*/
/* 배경 기본 색상 */
.bg-soft {background-color:#f5f5f5 !important;}/* 연한 색상을 이용하는 경우 */
.bg-basic {background-color:#bbb !important;}/* gray 등 기본적으로 사용되는 색상, soft보다는 진한 색상이다. */
.bg-white {background-color:#fff; color:#555 !important; }/* 어두운배경에서 흰색상을 이용하는 경우 */
.bg-dark {background-color:#333; color:#fff !important; }/* 무조건 어두운배경인경우 */
.bg-line {background-image:linear-gradient(-45deg, transparent 40%, #aaa 40%, #aaa 50%, transparent 50%, transparent 90%, #aaa 90%); background-size: 6px 6px; }/* 배경에 빗금이 들어가는 경우 */

/* 배경에 색상을 넣어야하는 경우 */
.bg-primary {background:#733938;}
.bg-secondary {background-color:#e18a71 !important; color:#fff;}
.bg-third {background-color:#00c853 !important; color:#fff;}/* primary, secondary 외 간혹 포인트를 이용해야하는 경우 */
.bg-point {background-color:#f9a825; color:#fff !important; } /* bg에 포인트가 들어가는 경우*/


select, input, input.file {width:100%; height:5rem; padding:0 1rem; line-height:4.9rem; border:1px solid #ddd;box-sizing:border-box; border-radius:5px; background: #fff;}
/* textarea */
.select{width: 20%;
    padding: 0 48px 0 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    background: url("../../common/img/ico_select_arrow.png") right center no-repeat;
    -webkit-appearance: none;
}

/**
* list style
*/
/* ul list */
ul.list {}
dl.list dd,
ul.list li{position:relative; padding:4px 10px;}
/* list > bullet(사각형) */
ul.list.list-square li,
dl.list.list-square dd {padding-left: 10px;}
ul.list.list-square li:before,
dl.list.list-square dd:before{ display:block; position:absolute; top:8px; left:0;width:4px; height:4px; content:""; background:#999;}

/* list > bullet(라운드) */
ul.list.list-dot li,
dl.list.list-dot dd {padding-left: 10px;}
ul.list.list-dot li:before,
dl.list.list-dot dd:before { display:block; position:absolute; top:50%; transform: translateY(-50%); left:0;width:4px; height:4px; content:""; background:#999; border-radius:50% }

/* list > bullet(라인) */
ul.list.list-line li,
dl.list.list-line dd {padding-left: 15px;}
ul.list.list-line li:before,
dl.list.list-line dd:before { display:block; position:absolute; top:10px; left:0;width:7px; height:2px; content:""; background:#999; }

/* list > bullet(언더라인) */
ul.list.list-udline li,
dl.list.list-udline dd {border-top:1px solid #ddd;}
ul.list.list-udline li:first-child,
dl.list.list-udline dd:first-child{border-top:0;}


/**
* Button
*/
/* style */
/* normal */
.btn {
    display:inline-block;
    height:4.4rem;
    line-height:4.4rem;
    padding:0 1.5rem;
    border:1px solid transparent;
    text-align:center;
    font-weight:400;
    background-color:#fff;
    white-space:nowrap;
    vertical-align:middle;
    border-radius:0.4rem;
    transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing:border-box;
    cursor:pointer;
    font-size:1.6rem;
    color:#555;
}
.btn.btn-line {border:1px solid #bbbbbb; background:#f5f5f5; color:#666; box-sizing:border-box;}
.btn.btn-round {width:4.4rem; padding:0; border-radius: 50%; line-height: 4.4rem;}
.btn.btn-radius {border-radius:45px}
.btn.btn-shadow {box-shadow:2px 2px 2px rgba(0, 0, 0, 0.2);}
.btn.btn-transparent {width:auto; background-color:transparent; border-color:#fff; color:#fff;}

.btn > i {vertical-align:middle; font-size:1.6rem; line-height: 4.4rem; }
.btn > strong {font-weight: 800; }

/* hover */
.btn:active,
.btn:hover {}

/* color */
.btn-primary {background:#733938; color:#fff !important;} /* 첫번째 색상 */
.btn-primary.btn-line {border:1px solid #733938; background:#fff; color:#733938 !important;}

.btn-secondary {background:#e18a71; color:#fff !important;} /* 두번째 색상 */
.btn-secondary.btn-line {border:1px solid #e18a71; background:#fff; color:#e18a71 !important;}

.btn-success {background:#00c853; color:#fff !important;}  /* 액션, 새로운것을 알리는 색상 */
.btn-success.btn-line {border:1px solid #00c853; background:#fff; color:#00c853 !important;}

.btn-info {background:#3d5afe; color:#fff !important;}  /* 정보제공 등을 목적으로 할 경우 */
.btn-info.btn-line {border:1px solid #3d5afe; background:#fff; color:#3d5afe !important;}

.btn-warning {background:#ec407a; color:#fff !important;}  /* 경고를 목적으로 할 경우 */
.btn-warning.btn-line {border:1px solid #ec407a; background:#fff; color:#ec407a !important;}

.btn-danger {background:#ff0000; color:#fff !important;}  /* 위험함을 알리는 목적으로 할 경우 */
.btn-danger.btn-line {border:1px solid #ff0000; background:#fff; color:#ff0000 !important;}

.btn-disabled {background:#999999; color:#ddd !important;} /* 비활성화 */
.btn-disabled.btn-line {border:1px solid #999999; background:#fff; color:#222 !important;}


/* size */
/* 사이즈는 모두 수치를 조정하여 사용바랍니다. 특히 input 과 동일하게 사이즈를 해주세요 */
.btn-tiny {height:2.4rem; line-height:2.4rem; font-size:1.4rem; padding:0 1rem; }
.btn-tiny.btn-radius {border-radius: 12px; }
.btn-tiny.btn-round {width:2.4rem;}
.btn-tiny > i { vertical-align: top; line-height:2.4rem;font-size: 1.5rem;}

.btn-small {height:3.2rem; line-height:3.2rem; font-size:1.4rem; }
.btn-small.btn-radius {border-radius:16px}
.btn-small.btn-round {width:3.2rem;}
.btn-small > i { vertical-align:sub; line-height:3.2rem;}

.btn-large {height:6rem; line-height:6rem; font-size:1.8rem; padding:0 2rem; font-weight:600;}
.btn-large.btn-radius {border-radius:30px;}
.btn-large.btn-round {width:6rem;}
.btn-large > i {line-height:6rem; font-size:3.8rem;}

.btn-huge {height:8rem; line-height:8rem; font-size:2.0rem; padding:0 4rem;}
.btn-huge.btn-radius {40px;}
.btn-huge.btn-round {width:8rem;}
.btn-huge > i {line-height:8rem; font-size:4.8rem;}

/* 가로 size 고정 시 */
/* 사이즈는 모두 수치를 조정하여 사용바랍니다. */
.btn-size-tiny {width:10rem;}
.btn-size-small {width:15rem;}
.btn-size-noraml {width:20rem;}
.btn-size-large {width:25rem;}
.btn-size-huge {width:30rem;}

/* align 및 크기 */
.btn-left {position:relative; padding:0 6rem 0 2rem; text-align:left; }
.btn-left > i {position:absolute; right:2rem; font-size:1.4rem;}

.btn-block {width:100%;}


/* 버튼 영역 */
.btn-box {margin-top:2rem !important; text-align:center;}
.btn-box ul {position:relative; display:inline-block; text-align: center;}
.btn-box ul:after {display:block; clear:both; content:"";}
.btn-box ul li { float:left; box-sizing:border-box; padding-left:1rem;}
.btn-box ul li:first-child {padding-left:0; margin-left:0;}
.btn-box.box1 ul li {width:100%}
.btn-box.box2 ul li {width:50%;}
.btn-box.box3 ul li {width:33.3%;}
.btn-box.box4 ul li {width:25%;}


/**
* tree
*/
#tag_tree {}
#tag_tree .tree {}
#tag_tree .tree > li > ul > li,
#tag_tree .tree > li > ul > li > ul > li {position:relative; line-height: 24px;background:url("/design/common/img/style/bg_line_tree.gif") 10px 0 no-repeat; }
#tag_tree .tree > li > button > .xi-minus-square {display:none;}

#tag_tree .tree > li > ul > li {display:none;padding-left:20px;} /* 첫번째 트리 앞 공백 */
#tag_tree .tree > li > ul > li > ul > li{display:none;padding-left:30px;} /* 두번째 트리 앞 공백 */

#tag_tree .tree > li.on > ul > li {display:block;}
#tag_tree .tree > li.open > ul > li {display:block;}
#tag_tree .tree > li.open > button > .xi-minus-square {display:block;}
#tag_tree .tree > li.open > button > .xi-plus-square {display:none;}

/**
* tootip
*/
/* tootip > 기본 */
.tootip {position:relative;}
.tootip::after {display:block; position:absolute; bottom:0; left:50%; bottom:-6px; border-top:6px solid #777; border-right:4px solid transparent; border-left:4px solid transparent; content:""; }
.tootip .tootip-o {position:relative; padding:10px;  text-align:center; background-color:#777; color:#fff; z-index:10;}

/* tooltip > 선이 있는 경우 */
.tootip.line {position:relative; }
.tootip.line::before {display:block; position:absolute; bottom:0; left:50%; bottom:-6px; border-top:8px solid #333; border-right:6px solid transparent; border-left:6px solid transparent; content:"";  z-index:0;}
.tootip.line::after {display:block; position:absolute; bottom:0; left:50%; margin-left:2px; bottom:-6px; border-top:8px solid #777; border-right:4px solid transparent; border-left:4px solid transparent; content:""; z-index:20;}
.tootip.line .tootip-o { position:relative; padding:10px; text-align:center; background-color:#777; color:#fff; z-index:10; border:1px solid #333;}


/* list_header */
div.list_header { height:30px; margin-bottom:5px; *zoom:1; color:#3c3c3c; font-size:11px; }
div.list_header.no_margin { margin:0; }
div.list_header:after { clear:both; display:block; content:""; }
div.list_header > div.left { float:left; position:relative; width:48%; height:30px; line-height:40px; padding-left:20px; text-align:left; }
div.list_header > div.left > i { position:absolute; top:0; left:0; height:30px; line-height:37px; font-size:16px; }
div.list_header > div.right { float:right; width:48%; height:30px; line-height:30px; text-align:right; }
div.list_header > div > strong { font-weight:bold; color:#c00000; }
div.list_header > div.right > a > img { padding-left:10px; }

/* list_footer */
div.list_footer { position:relative; height:21px; margin-top:10px; *zoom:1; }
div.list_footer:after { clear:both; display:block; content:""; }
div.list_footer > div.left { float:left; width:45%; text-align:left; }
div.list_footer > div.right { float:right; width:45%; text-align:right; }



/* 타블렛 970px ~ 1366px */
@media screen and (max-width:1366px){
    .txt.big {font-size: 8vw !important; }
    .txt.large {font-size: 2.0rem !important;}
    .txt.normal {font-size: 1.6rem !important;}
    .txt.tit {font-size: 2.8rem !important;}

}

/* 타블렛 970px ~ 1366px */
@media screen and (max-width:970px){
    .txt.big {font-size: 6vw !important; }
    .txt.large {font-size: 3vw !important;}

}


/**
* 반응형 또는 모바일 구축 시
*/
@media screen and (max-width:740px) {
    /**
    * common
    */
    .pc_hidden{display:block !important; }
    .m_hidden {display:none !important;}

    .x-scroll {position:relative; overflow:scroll; overflow-x:auto; overflow-y:hidden; white-space: nowrap; webkit-overflow-scrolling:touch; }
    ul.x-scroll > li {display:inline-block; float:none !important; vertical-align:top; white-space:normal; }

    txt.big {font-size: 9vw !important; }
    /**
    * button
    */
    .btn {display:block; width:100%;}

    .btn-box {margin-top:2rem;}
    .btn-box.box1 ul li {width:100%}
    .btn-box.box2 ul li {width:calc(100% / 2)}
    .btn-box.box3 ul li {width:calc(100% / 3)}
    .btn-box.box4 ul li {width:calc(100% / 4)}

    /**
    * input
    */
    select.m-block,
    input.m-block,
    input.file.m-block {width:100%;}

    /* 제목 영역에 사용됩니다. */
    .txt.tit {font-size:2.6rem !important;}/* 제목인 경우 사용 */
    .txt.subtit {font-size:2rem !important;}/* 부제목인 경우 사용 */

    /* 콘텐츠 영역에 사용됩니다. */
    .txt.large {font-size: 2rem !important;}

    /* style */
    .txt.thin {font-weight:100 !important;}/* heading 요소 이외에 얇은 서체를 이용해야하는 경우 수정 */
    .txt.bold {font-weight:600 !important;}
    .txt.bolder {font-weight:800}/* bold보다 강조를 해야하는 경우 */


}

@media screen and (max-width:580px) {
    .txt.big {font-size: 4rem !important; }
}