media_query.css

간단 설명

---

@charset "UTF-8";

@media screen and (min-width:481px){
	.shopMain .category li{min-width:11%}
	.tab.my span{width:25%}
}

/* Only iPhone 4,5 */
@media screen and (max-width:320px){
	#gnb .paymentApps > li{padding-left:17px}
	#gnb .footer div{padding-top:3px}

	.dialog.mobileNav .body .guide{padding-top:9px}
	.orderHistory .products .controls .select{width:100px}
	
	.table .btn.md{padding:0 5px}

	.lowerSalesList .board .content .item:first-child{width:65%}
	.lowerSalesList .board .content .item:last-child{min-width:35%}

	.topBanner .center{padding-right:20px}
	.topBanner p{font-size:14px}
	.topBanner .topBannerBtn{margin-left:0}

	.shopMain.mobile .products .list .info .thumb{width:100px;height:100px}
	.shopMain.mobile .products .list > li > div{padding-left:120px}
	.shopMain.mobile .products .card .info .fix{height:152px}

	.dialog.toCenter.navigation .layout{top:5%;bottom:5%}

	.buy .table .row.cell2 .col:last-child{width:50%}
	.buy .table .row.cell2 .col .btn{padding:0 10px}
	.buy .payment .btns li.item5 .btn{padding:6px 3px 0;vertical-align:middle;line-height:1.2}
	.buyDone .row.sides .itemCount .sub{max-width:100px}
	.paymentDone .row.sides .itemCount .sub{max-width:100px}
	
	.registerGate{padding-bottom:0}
	.registerGate .join{position:static;padding-top:20px}
	.registerGate .fixBottom{position:static}
	.registerGate .fixBottom .fixContent{position:static}

	.banner.colors a{height:auto;padding-bottom:8px}
	.banner.colors a strong{display:block}

    .products .list > li > div{padding-left:100px;height:126px}
    .products .list .info .thumb{left:5px;top:10px}
    .products .list .info .thumb.resize{width:90px;height:90px}
    .products .list .info .fix{padding:13px 5px 0 0}
    .products .list .info .reconts{margin-top: 11px}
    .products .list .info .price strong{font-size: 15px}
    .products .info .price dd{font-size: 12px}
    .products .row.quantity{padding-right:55px}
    .products .list .info .disable{left:7px;top:22px;width:85px;height:85px}
    .products .list .info .new{left:55px}
    .products .card .info .disable{top:15px}

    .favorite .products .list .info .thumb{top:7px}
    .favorite .products .list .info .disable{left: 45px;top: 15px}
    
    .favorite .products .list .disable,
    .cart .products .list .disable{left: 45px}

    .list.options .info .fix{padding: 0}
}



/* 가로모드 (iPhone4 기준이상) */
@media screen and (min-width:480px){
	.dialog.mobileNav .body nav span{width:25%}
	.dialog.mobileNav .body nav span a{height:50px;padding-top:16px;font-size:13px}
	.dialog.mobileNav .body nav span a:after{top:20px}
	.dialog.mobileNav .body .guide{height:66px;padding-top:12px}

	.dialog.toCenter.navigation .layout{top:5%;bottom:5%}

	.dialog.cart .body{max-height:200px;overflow-y:auto;overflow-x:hidden}
}

/* Only iPhone4,5 가로모드 */
@media screen and (min-width:480px) and (max-width: 568px){
	.dialog.cart .body .info{height:57px;padding-left:15px}
	.dialog.cart .body .info:after{content:'';display:block;clear:both}
	.dialog.cart .body .info .thumb{display:none}
	.dialog.cart .body .info .name{display:inline-block;float:left;width:49%}
	.dialog.cart .body .info .select{float:right;width:49%}
}

/* Only iPhone4 가로모드 */
@media screen and (min-width:480px) and (max-width: 481px){
	.dialog.cart .body{max-height:120px}
}
/* Only iPhone5 가로모드 */
@media screen and (min-width:568px) and (max-width: 569px){
	.dialog.cart .body{max-height:100px}
}

/* note 5 */
@media (-webkit-device-pixel-ratio: 3.5) and (min-width: 412px){
	.gateMain #body .slider{padding-top:90%}
	.video .dropDown .btn .icon.arrowBottom{margin-top:-5px}
	.lifeWrite .btn.md {line-height:35px}
	.lowerSalesList .headLine button .icon{margin-top:-5px}
}
@media (orientation: landscape){
	.ticketPreview .body .fixBottom{position:static;margin-top:20px}
	.ticketPreview .body .fixContent{position:static}
}

.ios{
    --top: 20pt;
    --bottom: 0px;
}
.ios.notch{
    --top: 33pt;
    --bottom: 35pt;
}

/* layout */
.ios #header{
    height: calc(var(--top) + 50px);
    padding-top: calc(var(--top) + 12px);
}
.ios #header .btn{
    top: calc(var(--top) + 5px);
}

.ios #body{
    padding-top: calc(var(--top) + 50px);
}
.ios #body.helpdeskMain{
    padding-top: calc(var(--top) + 70px);
}
.notch #body.cart{
    padding-bottom: calc(60px - var(--bottom) + 140px);
}
.notch #body.seminarInfo{
    padding-bottom: var(--bottom);
}
.notch .fixBottom.happyCenter .fixContent{
    height: calc(60px - var(--bottom) + 55px);
}

/* slide-popup */
.notch .slidePopup .slider .indicator.expand{
    bottom: calc(60px - var(--bottom) + 65px);
}

/* gnb */
.notch #gnb{
    padding-bottom: var(--bottom);
}
.ios #gnb .info{
    padding-top: calc(var(--top) + 52px);
}
.ios #gnb .info.nonmember{
    padding-top: calc(var(--top) + 22px);
}
.ios #gnb .info .local{
    top: calc(var(--top) + 11px);
}
.ios #gnb .info .setup a{
    top: calc(var(--top) + 15px);
}
.ios .menuClose{
    top: calc(var(--top) + 17px);
}

/* main */
.ios .gateMain #header .btnMenu{
    top: calc(var(--top) + 6px);
}
.ios .gateMain #header .btns{
    top: calc(var(--top) + 8px);
}
.notch .gateMain #footer .fixContent{
    bottom: 0;
}
.ios .gateMain #body{
    padding-top: calc(var(--top) + 50px);
}
.notch .gateMain #body #footer{
    bottom: calc(var(--bottom) + 18px);
}
.notch .gateMain #nav a{
    padding-bottom: var(--bottom);
}

/* company */
.ios .company > .layout{
    height: calc(var(--top) + 45px);
}
.ios .company > .layout .btnMenu{
    top: calc(var(--top) + 7px);
}
.ios .company > .layout .btnSnb{
    top: calc(var(--top) + 4px);
}
.ios .company .header{
    padding-top: var(--top);
}
.ios .company .header .content{
    transform: translateY(calc(var(--top) + 118px));
}
.ios .company .section{
    padding-top: calc(var(--top) + 291px);
}
.ios .company .marketing,
.ios .company .socialShare,
.ios .company .motto,
.ios .company .vision,
.ios .company .history{
    padding-top: calc(var(--top) + 336px);
}

/* dialog */
.notch .dialog.tutorial .layout{
    padding: 0;
    height: 100%;
}
.notch .dialog.tutorial .layout .body{
    display: flex;
    align-items: center;
    justify-content: center;
}

.notch .dialog.promotions .body{
    padding-bottom: calc(var(--bottom));
}

.ios .dialog.page .layout{
    padding-top: calc(var(--top) + 50px);
}
.ios .dialog.page.noHeader .layout{
    padding-top: 0;
}
.ios .dialog.page .layout header{
    height: calc(var(--top) + 50px);
    padding-top: calc(var(--top) + 9px);
}
.ios .dialog.page .dialogClose{
    top: calc(var(--top) + 16px);
}
.ios .treeLevel.dialog.page .dialogClose{
    top: calc(var(--top) + 8px);
    right: 9px;
}
.ios .treeLevel.dialog.page .dialogClose:after{
    top: 7px;
}
.ios .dialog .dialogPrev{
    top: calc(var(--top) + 16px);
}

.ios .dialog.search #header{
    height: 50px;
    padding-top: 12px;
}
.ios .dialog.search .layout{
    margin-top: calc(var(--top) + 50px);
}
.ios .dialog.search .layout + .dim{
    top: calc(var(--top) + 50px);
    bottom: 0;
}
.ios .dialog.search #body{
    padding-top: 50px;
}

.ios .dialog.mobileGuide.mobileQa .tab{
    top: calc(var(--top) + 50px);
}
.notch .dialog.findProduct .body{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .dialog.findProduct .search{
    position: relative;
}
.notch .dialog.findProduct .search input[type='search']{
    padding-right: 30px;
}
.notch .dialog.findProduct .search .btnDelete{
    right: 0;
}
.notch .snsShare .layout{
    padding-bottom: calc(60px - var(--bottom));
}

/* shop */
.notch #snb{
    padding-bottom: calc(60px - var(--bottom));
}
.notch #footer .fixContent{
    padding-bottom: calc(60px - var(--bottom) + 101px);
}
.notch .notice.fixBottom{
    bottom: calc(60px - var(--bottom) + 171px);
}
.notch .products .list{
    margin-bottom: calc(60px - var(--bottom));
}
.notch .shopMain .btnMore{
    margin-bottom: calc(60px - var(--bottom) + 20px);
}
.notch .fixBottomBtn{
    bottom: calc(60px - var(--bottom) + 65px);
}
.notch .buy ~ .fixBottomBtn,
.notch .product ~ .fixBottomBtn{
    bottom: calc(60px - var(--bottom) + 75px);
}
.notch .row.btns .col,
.notch .noticeDetail .row.btns.margin.floating.box{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .row.btns .col:first-child:last-child{
    padding-bottom: 0;
}
.notch .row.btns.floating{
    height: calc(60px - var(--bottom) + 70px);
}
.notch .favorite .row.btns.floating{
    height: 70px;
    padding-bottom: 0;
    bottom: calc(60px - var(--bottom) + 60px);
}
.notch .buy .agreement{
    margin-bottom: calc(60px - var(--bottom));
}
.notch .buy .row.btns.btnScroll{
    height: calc(60px - var(--bottom) + 70px);
}

/* myoffice */
.notch .planList .plans{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .lowerSalesList .guide{
    margin-bottom: calc(60px - var(--bottom));
}

/* paynowBiz */
.notch .paymentMethod.dialog .layout .body ul li:last-child{
    padding-bottom: 15px;
}