/*-----mobile-----*/
.introBox p,
.introBox span,
.introBox strong,
.introBox b,
.introBox h1,
.contBox p,
.contBox span,
.contBox strong,
.contBox b{font-size : 14px; font-weight : 300; line-height : 24px; letter-spacing : -0.6px; font-family : 'Noto Sans KR';}
.subIntroBox div,
.subIntroBox p,
.subIntroBox span,
.subIntroBox strong,
.subIntroBox b,
.subIntroBox b span{font-size : 14px !important; font-weight : 300 !important; line-height : 24px !important; letter-spacing : -0.6px !important; font-family : 'Noto Sans KR' !important;}
.subIntroBox b,
.subIntroBox b span{font-weight : 700 !important;}
table{margin : auto !important;}
/*웹 에디터 인라인 스타일값을 상회하기 위한 important 선언입니다.*/
.contBox > div {padding : 0 20px; margin : 50px auto;}

.introBox {position : relative; margin-bottom : 50px; overflow : hidden; background-position : center top; background-size : 100% auto; background-repeat : no-repeat;}
.introSquare {padding : 211px 0 0;}
.introRectangle {padding : 113px 0 0;}
.introBox::before{content : ""; position : absolute; width : 100%; height : 100%; top : 0; left : 0; z-index : 0; background : #000; opacity : 0.3; mix-blend-mode : multiply;}
.introBox .bgBox{position : absolute; top : 0; left : 0; width : 100%; height : 100%; background : #fff; opacity : 0; z-index : 2;}
.introBox .txtWholeWrap{position : relative; z-index : 3;}
.introBox .imgWrap{display : none;}
.introBox .topWrap{margin-bottom : 40px;}
.introBox .categoryWrap{ width : calc(100% - 40px);display : flex; align-items : flex-end; justify-content : center; gap : 12px; margin : 0 auto 12px; flex-wrap : wrap;}
.introBox .categoryWrap h1{color : #fff; border-bottom : 1px solid #fff; line-height : 14px; font-weight : 500; white-space : nowrap;}
.introBox h2{font-size : 26px; font-weight : 700; line-height : 36px; text-align : center; letter-spacing : -0.6px; color : #fff;}
.introBox .botWrap{background : #000; padding : 40px 20px 50px; border-top-right-radius : 30px; border-top-left-radius : 30px; position : relative; z-index : 3;}
.introBox .hashWrap{display : flex; align-items : center; justify-content : center; gap : 8px; margin-bottom : 14px; flex-wrap : wrap;}
.introBox .hashWrap h2{display : inline-block; padding : 6.5px 20px; border-radius : 50px; border : 1px solid #fff; color : #fff; font-size : 13px; font-weight : 400; line-height : 1.45; box-sizing : border-box;}
.introBox .botWrap p{font-weight : 500; text-align : center; color : #fff;}
.introBox{background-image : url(/images/smartGuide/mo/bg_intro_sample.png);}

.subIntroBox p{text-align : left;}
.subIntroBox p img{display : block; margin : 0 auto;}
.subIntroBox .highlight{font-weight : 700 !important; color : var(--main-color) !important; margin-top : 20px; font-size : 16px !important;}

.contBox .titleBox{padding : 30px 20px 36px; background : #000; border-top-left-radius : 30px; border-top-right-radius : 30px;}
.titleBox .titWrap{text-align : center;}
.titleBox .titWrap::after{content : ""; display : block; background : #fff; width : 100%; height : 1px; margin-top : 16px;}
.titleBox .titWrap .stepNum{background : #fff; border-radius : 50px; padding : 2px 15px; display : inline-flex; align-items : center; justify-content : center; margin-bottom : 8px;}
.titleBox .stepNum span{color : var(--main-color); font-weight : 500; font-size : 15px; line-height : 28px;}
.titleBox h3{color : #fff; font-size : 21px; font-weight : 700; line-height : 28px;}
.titleBox .txtWrap{padding-top : 24px;}
.titleBox .txtWrap p{font-size : 14px; font-weight : 500; line-height : 24px; color : #fff; text-align : center; word-break : break-all;}

.contBox .txtBox:not(:last-child){margin-bottom : 72px;}
.txtBox strong{font-size : 14px; font-weight : 700; line-height : 24px;}
.txtBox p{font-size : 14px; font-weight : 300; line-height : 24px;}

.contBox .defaultTxtBox{}

.imgBox{text-align : center;}
.imgBox img{display : block; margin : 0 auto;}
.imgBox img:not(:last-child){margin-bottom : 7px;}

.contEnd{width : calc(100% - 40px); margin : 50px auto; height : 1px; background : #000;}

.contBox table td{vertical-align : middle;}
.contBox table td p{text-align: center;}

/*list page*/

.topTitBox{margin : 50px auto 26px; width : calc(100% - 40px);}
.topTitBox h1{font-size : 26px; font-weight : 400; line-height : 1.45; letter-spacing : -0.6px; text-align : center; margin-bottom : 3px;}
.topTitBox h1 span{font-weight : 700;}
.topTitBox p{font-size : 14px; font-weight : 400; line-height : 1.45; text-align : center;}

.sortBox .hashBox::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
.sortBox .hashBox{display: flex; align-items: center; justify-content: flex-start; gap: 0 8px; padding: 0 20px 15px; overflow-x: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ position: relative;}
.sortBox .hashBox .underBorder{content: ""; display: block; height: 1px; background: #000; position: absolute; bottom: 0; left: 20px; min-width: calc(100% - 40px);}
.sortBox .hashBox button{font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.6px; padding: 6.5px 20px; border-radius: 50px; background: #F8F8F8; color: #000; flex-shrink: 0; font-family: 'Noto Sans KR'; }
.sortBox .hashBox button h2{
    font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.6px; color: #000; font-family: 'Noto Sans KR';
}
.sortBox .hashBox .select{background: #000; color: #fff;}
.sortBox .hashBox .select h2{color: #fff;}
/* .sortBox .hashBox button::before{content: "#"; margin-right: -1px;} */
.sortBox .optionBox{width: calc(100% - 40px); display: flex; align-items: center; justify-content: flex-end; margin: 6px auto 18px;}
.sortBox .optionBox > div{width: 57px;}
.sortBox .optionBox .select2-container{left: auto !important;}/*필터박스 정렬*/

.mainList{margin-bottom : 80px;}
.mainList li{width : calc(100% - 40px); margin : 0 auto; position : relative; border-radius : 12px; overflow : hidden;}
.mainList li:not(:last-child){margin-bottom : 20px;}
.mainList li a{display : block;}
.mainList .imgWrap{position : relative; z-index : 0; border-radius : 12px; overflow : hidden; display : flex; align-items : center; justify-content : center;}
.mainList .listRectangle .imgWrap{height : 218px;}
.mainList .listSquare .imgWrap{height : 335px;}
.mainList .imgWrap img{display : block; width : 100%; height : 100%; object-fit : cover;}
.mainList .imgWrap::before{content : ""; display : block; width : 100%; height : 100%; position : absolute; top : 0; left : 0; background : rgba(0, 0, 0, 0.3); z-index : 1;}
.mainList .txtBox{position : absolute; z-index : 2; bottom : 23px; left : 25px; width : calc(100% - 65px);}
.mainList .titLine h3,
.mainList .txtBox span{color : #fff;}
.mainList .sortLine{height : 30px; display : flex; align-items : center; justify-content : flex-start; gap : 0 5px;}
.mainList .sortLine span{font-size : 13px; font-weight : 500;  border-bottom : 1px solid #fff;}
.mainList .titLine h3{font-size : 18px; font-weight : 700; line-height : 30px;}
.mainList .hashLine span{font-size : 13px; font-weight : 400; line-height : 30px;}
.mainList .hashLine span::before{content : "#"; display :inline-block;}
/*list page*/

/*스마트가이드 외적 요소*/
.section-wide.section-fourth .main-title,
.section-wide.section-fifth .main-title{text-align : left; font-weight: 500; font-size: 18px; line-height: 28px; margin-bottom : 14px;}
.section-wide{padding : 0px 20px 0px 20px;}
.section-wide.section-fourth .content{padding : 0 0 30px;}

.event-thumbs{ border : 0.5px solid #e6e6e6;}
.event-thumbs:not(:last-child){margin-bottom : 12px;}
.event-thumbs p{padding : 15px 20px; font-weight : 500; font-size : 16px; word-break : break-all; word-wrap : break-word; min-height : 38px; line-height : 1.2; letter-spacing : -0.6px;}

.section-fourth .btnSeeMore,
.section-fifth .btnSeeMore{width : calc(100% - 120px); display : flex; margin : 0 auto; color : var(--main-color); border : 1px solid var(--main-color); height : 36px; align-items : center; justify-content : center; font-size : 11px; font-weight : 400; line-height : 16px; letter-spacing : -0.6px; margin-top : 50px;}
.section-fourth .btnSeeMore::after,
.section-fifth .btnSeeMore::after{content : ""; display : inline-block; background : url(/resources/images/smartGuide/pc/arrow_seeMore_Red.png) no-repeat center center / contain; width : 12px; height : 12px; margin-left : 9px;}

main > *:last-child{padding-bottom : 50px;}

.mainList .listPublic{ cursor: pointer; }

.main-title h2{
    display: inline-block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    word-break: break-all;
    letter-spacing: -1.56px;
}

/*-----mobile-----*/


/*-----pc-----*/
@media screen and (min-width : 1160px){
    .introBox p,
    .introBox span,
    .introBox strong,
    .introBox b,
    .contBox p,
    .contBox span,
    .contBox strong,
    .contBox b{font-size : 20px; font-weight : 300; line-height : 30px; letter-spacing : -0.6px;}
    .subIntroBox div,
    .subIntroBox p,
    .subIntroBox span,
    .subIntroBox strong,
    .subIntroBox b,
    .subIntroBox b span{font-size : 20px !important; font-weight : 300 !important; line-height : 30px !important; letter-spacing : -0.6px !important;}
    .contBox > div{width : 1160px; padding : 0;}
    /* .contBox > div:first-child{margin-top : 80px;} */

    .introBox{height : 560px; padding : 100px 0 0;  box-sizing : border-box; overflow : visible; background-position : center center; background-size : auto;}
    .introBox::before{
        background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), color-stop(20%, rgb(0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(80%, rgb(0, 0, 0)), to(rgb(0, 0, 0)));
        background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0.6) 50%, rgb(0, 0, 0) 80%, rgb(0, 0, 0) 100%);
        opacity: 1;}
    .introBox .innerWrap{width : 1160px; margin : 0 auto; display : flex; align-items : flex-start; justify-content : flex-start; gap : 0 54px;}
    .introBox .botWrap{background : none; padding : 0;}
    .introBox .topWrap{margin-bottom : 34px;}
    .introBox .categoryWrap{justify-content : flex-start; gap : 0 19px; margin-bottom : 16px; white-space : nowrap; width : auto;}
    .introBox .categoryWrap h1{font-size : 20px; font-weight : 500; line-height : 30px;}
    .introBox h2{font-size : 50px; font-weight : 500; line-height : 60px; text-align : left;}
    .introBox .hashWrap{justify-content : flex-start; gap : 10px; margin-bottom : 47px;}
    .introBox .hashWrap h2{font-size : 16px;}
    .introBox .botWrap p{font-size : 18px; text-align : left; line-height : 28px;}

    .introSquare{ margin-bottom : 150px;}
    .introSquare .imgWrap{display : flex; width : 540px; height : 540px; border-radius : 12px; overflow : hidden; align-items : center; justify-content : center; position : relative; z-index : 1; flex-shrink : 0;}

    .introRectangle{  margin-bottom : 120px;}
    .introRectangle .imgWrap{display : flex;width : 540px;height : 350px;border-radius : 12px;overflow : hidden;align-items : center;justify-content : center;position : relative;z-index : 1;flex-shrink: 0;}

    .contBox .subIntroBox{margin : 60px auto; width : 1060px; text-align: left}
    .contBox .serveralImg{text-align : center; display : flex; align-items : center; justify-content : center;}
    .contBox .serveralImg img{margin : 0px 0; /*float : left;*/}
    .subIntroBox b{font-weight : 500 !important;}
    .subIntroBox b span{font-weight : 500 !important;}
    .subIntroBox .highlight{font-size : 24px; font-weight : 500 !important;}

    .contBox .titleBox{padding : 0; background : none; overflow : hidden; margin-top : 80px;}
    .titleBox .titWrap{position : relative; padding : 26px 0; background : #000;}
    .titleBox .titWrap .stepNum{position : absolute; top : 50%; left : 50px; transform : translateY(-50%);}
    .titleBox .stepNum span{font-size : 24px; font-weight : 500;}
    .titleBox .titWrap::after{content : none;}
    .titleBox h3{font-size : 32px; font-weight : 400; line-height : 28px;}
    .titleBox .txtWrap{background : #F8F8F8; padding : 23px 0 32px;}
    .titleBox .txtWrap p{color : #000; font-size : 22px; font-weight : 400; line-height : 32px;}
    .titleBox .txtWrap strong{color : #000; font-size : 22px; font-weight : 400; line-height : 32px;}

    .txtBox strong{font-weight : 500;}

    .imgBox{text-align : center;}
    .imgBox img{display : block; margin : 0 auto;}
    /* .imgBox.serveralImg{display : grid; justify-content : space-between; align-items : flex-start; gap : 0 2px;} */

    .contBox .defaultTxtBox{width : 1060px; margin : 0 auto 60px;}
    .contBox .wideMode{width : 1160px; margin : 0 auto 60px;}
    .defaultTxtBox b{font-weight : 500;}

    .contEnd{width : 1160px; margin : 80px auto;}

    /*list page*/
    .topTitBox,
    .sortBox,
    .mainList{width : 100%; max-width : 1160px; margin : 0 auto;}
    .topTitBox{margin : 53px auto 27px;}
    .topTitBox h1{font-size : 42px; font-weight : 300;}
    .topTitBox h1 span{font-weight : 500;}
    .topTitBox p{font-size : 18px; font-weight : 300;}

    .sortBox .hashBox{gap : 0 10px; overflow : hidden; border-bottom : 1px solid #000; padding : 0 0 19px; justify-content : center;}
    .sortBox .hashBox button{font-size : 16px; font-weight : 400;}
    .sortBox .hashBox button:last-child{margin-right : 0;}
    .sortBox .hashBox button h2{
        font-size: 16px;
        font-weight: 400;
    }
    .sortBox .optionBox{margin : 17px auto; width : 100%;}
    .sortBox .optionBox div{width : 67px; height : 20px; padding : 4px 0; box-sizing : border-box;}
    .sortBox .hashBox .underBorder{display : none;}

    .mainList{margin-bottom : 120px;}
    .mainList ul{display : grid; grid-template-columns : repeat(3, 368px); gap : 53px 28px;}
    .mainList li{width : 100%;}
    .mainList li:not(:last-child){margin : 0;}
    .mainList .listRectangle .imgWrap{height : 239px;}
    .mainList .listSquare .imgWrap{height : 368px;}
    .mainList .listPublic{display : block;}
    .mainList .imgWrap{margin-bottom : 11px;}
    .mainList .imgWrap::before{content : none;}
    .mainList .txtBox{position : static; width : 100%;}

    .mainList .sortLine span{color : #000; font-size : 14px; border-bottom : 1px solid #000;}
    .mainList .titLine{margin-bottom : 8px;}
    .mainList .titLine h3{color : #000; font-size : 20px; font-weight : 500; white-space : nowrap;}
    .mainList .hashLine span{font-size : 16px; font-weight : 300; color : #767676;}
    /*list page*/

    .main-top-cate.smartGuideOption{position : absolute; top : 150px; z-index : 100; border-style : none;}
    .main-top-cate.smartGuideOption nav div{color : #fff;}
    .main-top-cate.smartGuideOption nav div:last-child{color : #fff;}

    .section-wide.section-fourth .content{padding : 0; margin-bottom : 82px;}

    .section-fourth .event-thumbs{}
    .section-fourth .event-thumbs:not(:last-child){margin-bottom : 0;}
    .section-fourth .event-thumbs p{padding : 12px 30px; font-weight : 500; font-size : 20px; min-height : 48px; line-height : 1.2; letter-spacing : -0.5px; text-align : left; border : 1px solid #E6E6E6; border-top : none; margin : 0 0 10px; height : 73px;}

    .section-wide.section-fourth .main-title,
    .section-wide.section-fifth .main-title{display : flex; align-items : center; justify-content : space-between; margin-bottom : 30px;}
    .section-fourth .main-title .btnSeeMore,
    .section-fifth .main-title .btnSeeMore{width : auto; display : inline-flex; margin : 0; color : #000; border-style : none; height : auto; align-items : center; justify-content : center; font-size : 18px; line-height : 28px; letter-spacing : -0.6px; font-weight : 400;}
    .section-fourth .main-title .btnSeeMore::after,
    .section-fifth .main-title .btnSeeMore::after{content : ""; display : inline-block; background : url(/resources/images/smartGuide/pc/arrow_seeMore_BK.png) no-repeat center center / contain; width : 12px; height : 12px; margin-left : 9px;}
    .section-fourth .main-title .btnSeeMore:hover,
    .section-fourth .main-title .btnSeeMore:active,
    .section-fourth .main-title .btnSeeMore:focus,
    .section-fifth .main-title .btnSeeMore:hover,
    .section-fifth .main-title .btnSeeMore:active,
    .section-fifth .main-title .btnSeeMore:focus{color : var(--main-color);}
    .section-fourth .main-title .btnSeeMore:hover::after,
    .section-fourth .main-title .btnSeeMore:active::after,
    .section-fourth .main-title .btnSeeMore:focus::after,
    .section-fifth .main-title .btnSeeMore:hover::after,
    .section-fifth .main-title .btnSeeMore:active::after,
    .section-fifth .main-title .btnSeeMore:focus::after{background : url(/resources/images/smartGuide/pc/arrow_seeMore_Red.png) no-repeat center center / contain;}

    .section-fourth .btnSeeMore.hide,
    .section-fifth .btnSeeMore.hide{display : none;}

    main > *:last-child{padding-bottom : 140px;}
    .hv-header .sub-gnb .menu ul li.d2.smart-guide{color: #ed174d;}

    .main-title h2{
        font-size: 30px;
        font-weight: 500;
        letter-spacing: -1.8px;
    }
}

/*1920 이상일 시 최상단 컨텐츠 그라데이션 조정*/
@media screen and (min-width : 1920px){
    .introBox::before{
        background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), color-stop(25%, rgb(0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(75%, rgb(0, 0, 0)), to(rgb(0, 0, 0)));
        background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0.6) 50%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 100%);
        opacity: 1;}
}
@media screen and (min-width : 2560px){
    .introBox::before{
        background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), color-stop(30%, rgb(0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.6)), color-stop(70%, rgb(0, 0, 0)), to(rgb(0, 0, 0)));
        background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0) 100%);}
}
/*-----pc-----*/

/*구매가이드 하드코딩 이미지 추가*/
@media screen and (min-width: 1160px){
    .guideImg-wrap{width: 1160px; margin: 0 auto;}
    .introSquare{margin-bottom: 116px;}
    .introRectangle{margin-bottom: 116px;}
}
@media screen and (max-width: 1159px){
    .guideImg-wrap{width: 100%; padding: 0 20px;}
    .guideImg-wrap .img-wrap{border-top: 1px solid #ED174D; border-bottom: 1px solid #Ed174D;}
    .introBox{margin-bottom: 26px;}
    .contBox > div{margin: 26px auto;}
}